WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 多说自定义CSS效果 让你的多说评论头像动起来

多说自定义CSS效果 让你的多说评论头像动起来

PCDotFan10年前

 

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

这是来自V 说的多说 CSS 效果,本站已经用上了其中的第九个。很漂亮吧~~

 

效果演示

效果一

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

效果二

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

 效果三

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

效果四

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

效果五

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

效果六

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

效果七

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

效果八

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

效果九

多说自定义CSS效果 让你的多说评论头像动起来-WP酷

 

代码使用

请将各个效果的代码贴至多说评论→个性化设置中的自定义 CSS 以使用。

 

效果一

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}

@-moz-keyframes rotateInDownLeft {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1;
    }
}

@-o-keyframes rotateInDownLeft {
    0% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

#ds-reset .ds-avatar img{
    -webkit-animation-name: rotateInDownLeft;
    -moz-animation-name: rotateInDownLeft;
    -o-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

#ds-reset .ds-avatar img:hover{
    -webkit-animation-name: rotateOutDownLeft;
    -moz-animation-name: rotateOutDownLeft;
    -o-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}

@-moz-keyframes rotateOutDownLeft {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1;
    }

    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(90deg);
        opacity: 0;
    }
}

@-o-keyframes rotateOutDownLeft {
    0% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(0);
        opacity: 1;
    }

    100% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(90deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}

 

效果二

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(.3);
    }

    50% {
        opacity: 1;
        -moz-transform: scale(1.05);
    }

    70% {
        -moz-transform: scale(.9);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@-o-keyframes bounceIn {
    0% {
        opacity: 0;
        -o-transform: scale(.3);
    }

    50% {
        opacity: 1;
        -o-transform: scale(1.05);
    }

    70% {
        -o-transform: scale(.9);
    }

    100% {
        -o-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}

#ds-reset .ds-avatar img {
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}
@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
    }

    25% {
        -webkit-transform: scale(.95);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
}

@-moz-keyframes bounceOut {
    0% {
        -moz-transform: scale(1);
    }

    25% {
        -moz-transform: scale(.95);
    }

    50% {
        opacity: 1;
        -moz-transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -moz-transform: scale(.3);
    }
}

@-o-keyframes bounceOut {
    0% {
        -o-transform: scale(1);
    }

    25% {
        -o-transform: scale(.95);
    }

    50% {
        opacity: 1;
        -o-transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -o-transform: scale(.3);
    }
}

@keyframes bounceOut {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(.3);
    }
}

#ds-reset .ds-avatar img:hover{
    -webkit-animation-name: bounceOut;
    -moz-animation-name: bounceOut;
    -o-animation-name: bounceOut;
    animation-name: bounceOut;
}

 

 效果三

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(-150deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@-moz-keyframes rotateIn {
    0% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(-150deg);
        opacity: 0;
    }

    100% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(0);
        opacity: 1;
    }
}
@-o-keyframes rotateIn {
    0% {
        -o-transform-origin: center center;
        -o-transform: rotate(-150deg);
        opacity: 0;
    }

    100% {
        -o-transform-origin: center center;
        -o-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-150deg);
        opacity: 0;
    }

    100% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
}

#ds-reset .ds-avatar img{
    -webkit-animation-name: rotateIn;
    -moz-animation-name: rotateIn;
    -o-animation-name: rotateIn;
    animation-name: rotateIn;
}
@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(150deg);
        opacity: 0;
    }
}

@-moz-keyframes rotateOut {
    0% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(0);
        opacity: 1;
    }

    100% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(150deg);
        opacity: 0;
    }
}

@-o-keyframes rotateOut {
    0% {
        -o-transform-origin: center center;
        -o-transform: rotate(0);
        opacity: 1;
    }

    100% {
        -o-transform-origin: center center;
        -o-transform: rotate(150deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: center center;
        transform: rotate(150deg);
        opacity: 0;
    }
}

#ds-reset .ds-avatar img:hover{
    -webkit-animation-name: rotateOut;
    -moz-animation-name: rotateOut;
    -o-animation-name: rotateOut;
    animation-name: rotateOut;
}

 

效果四

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

@-webkit-keyframes rollIn {
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}

@-moz-keyframes rollIn {
    0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}

@-o-keyframes rollIn {
    0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}

@keyframes rollIn {
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

#ds-reset .ds-avatar img{
    -webkit-animation-name: rollIn;
    -moz-animation-name: rollIn;
    -o-animation-name: rollIn;
    animation-name: rollIn;
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
    }
}

@-moz-keyframes rollOut {
    0% {
        opacity: 1;
        -moz-transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        -moz-transform: translateX(100%) rotate(120deg);
    }
}

@-o-keyframes rollOut {
    0% {
        opacity: 1;
        -o-transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        -o-transform: translateX(100%) rotate(120deg);
    }
}

@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}

#ds-reset .ds-avatar img:hover{
    -webkit-animation-name: rollOut;
    -moz-animation-name: rollOut;
    -o-animation-name: rollOut;
    animation-name: rollOut;
}

 

效果五

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
    20% { -moz-transform: rotate(15deg); }
    40% { -moz-transform: rotate(-10deg); }
    60% { -moz-transform: rotate(5deg); }
    80% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes swing {
    20% { -o-transform: rotate(15deg); }
    40% { -o-transform: rotate(-10deg); }
    60% { -o-transform: rotate(5deg); }
    80% { -o-transform: rotate(-5deg); }
    100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

#ds-reset .ds-avatar img:hover{
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -o-animation-name: swing;
    animation-name: swing;
}

 

效果六

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }
    50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }
    50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#ds-reset .ds-avatar img:hover {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -o-animation-name: pulse;
    animation-name: pulse;
}

 

效果七

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30% { -moz-transform: translateX(20%) rotate(3deg); }
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  60% { -moz-transform: translateX(10%) rotate(2deg); }
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); }
}

@-o-keyframes wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
  30% { -o-transform: translateX(20%) rotate(3deg); }
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
  60% { -o-transform: translateX(10%) rotate(2deg); }
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); }
}

@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

#ds-reset .ds-avatar img:hover{
    -webkit-animation-name: wobble;
    -moz-animation-name: wobble;
    -o-animation-name: wobble;
    animation-name: wobble;
}

 

效果八

#ds-reset .ds-avatar img{
    width:54px;height:54px; /* 设置图像的长和宽,这里要根据自己的评论框情况更改 */
    border-radius: 27px;/* 设置图像圆角效果, 在这里我直接设置了超过 width/2 的像素,即为圆形了 */
    -webkit-border-radius: 27px;/* 圆角效果:兼容 webkit 浏览器 */
    -moz-border-radius:27px;
    box-shadow: inset 0 -1px 0 #3333sf;/* 设置图像阴影效果 */
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;/* 变化时间设置为 0.4 秒 (变化动作即为下面的图像旋转 360 度)*/
    -moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover{/* 设置鼠标悬浮在头像时的 CSS 样式 */
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    transform: rotateZ(360deg);/* 图像旋转 360 度 */
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

 

效果九

#ds-reset .ds-avatar img:hover {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flip;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flip;
    -o-backface-visibility: visible !important;
    -o-animation-name: flip;
    backface-visibility: visible !important;
    animation-name: flip;
}
 @-webkit-keyframes flip {
 0% {-webkit-transform: perspective(400px) rotateY(0);-webkit-animation-timing-function: ease-out;}
 40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function: ease-out;}
 50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;}
 80% {-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;}
 100% {-webkit-transform: perspective(400px) scale(1);-webkit-animation-timing-function: ease-in;}
}

@-moz-keyframes flip {
0% {-moz-transform: perspective(400px) rotateY(0);-moz-animation-timing-function: ease-out;}
 40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function: ease-out;}
 50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function: ease-in;}
 80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function: ease-in;}
 100% {-moz-transform: perspective(400px) scale(1);-moz-animation-timing-function: ease-in;}
}
@-o-keyframes flip {
0% {-o-transform: perspective(400px) rotateY(0);-o-animation-timing-function: ease-out;}
 40% {-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function: ease-out;}
 50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function: ease-in;}
 80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}
 100% {-o-transform: perspective(400px) scale(1);-o-animation-timing-function: ease-in;}
}
@keyframes flip {
0% {transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}
 40% {transform: perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function: ease-out;}
 50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
 80% {transform: perspective(400px) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
 100% {transform: perspective(400px) scale(1);animation-timing-function: ease-in;}
}

 

 

0
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (5)
再想想
  • 敖天羽

    无头像的主题真是太好了

    10年前
  • Judas.n

    这个不错,我选了第五种。

    10年前
  • Mars丶Ge

    不知道咋没效果~已经放到多说CSS里面了,跟浏览器有关系么?IE8试过也不行

    9年前
    • WP酷

      @Mars丶Ge IE8不支持所有CSS3效果。。

      9年前
    • Mars丶Ge

      @WP酷 难怪了,我用火狐完美显示~~

      9年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
通过自定义模板,为你的WordPress主题添加文章格式
9年前
Kratos – 极简黑灰色调 WordPress 博客主题
7年前
WordPress 内容回复可见的实现方法
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1