duoshuo

昨天@Cysime在他的博客分享了一个多说的自定义CSS效果,实现圆角头像,鼠标移上时旋转的效果,就是下面的效果八。因为看了那个玩意儿觉得很有意思,所以才萌生了写这篇技术文的想法。我想很多多说的用户都会需要的。我今天写到的CSS3效果是之前在网上找到收藏的代码素材,现在应用到多说上。

 

正文开始

各种效果我都做成了GIF动态图,光光截这些图都花了我好长的时间。大家可以很直观的看到效果。毕竟是图片,实际效果当然会更好的多。

将代码粘贴到多说评论-个性化设置-自定义CSS 里,刷新即可看到效果。

下面是预览图片,看到好看的样式,点击图片试试!

(图片顺序从左到右,由上到下分别是样式一至样式九。)

文章内容比较长,都是一些代码来的,请点击自己喜欢的样式快速浏览。

样式一 样式二 样式三 样式四 样式五 样式六 样式七 样式八 样式九

ps:  代码都是共通的,不局限于多说,应用在别的效果上也是可以的。

next ps:  汗差一个就凑够十个了。

 

样式一

ds_css1

#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_css2

#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_css3

#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_css4

#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_css5

#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_css6

#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_css7

#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_css8

#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_css9

#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;}
}


JiaJieChan个人对第三方的评论木有需要,所以把这个样式应用到自用的inove主题上了,效果可以移动到各条评论看看。

移动到评论头像就会摇摆一下,就像树叶随风摇摆,太有爱了!   7:)

 

本文转载自 http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html

 

Last modification:June 25, 2021
如果解决了你的困扰, 赏杯咖啡吧!
正文字体: 苍耳字库(屏幕显示字体)·苍耳今楷