saber 酱的抱枕

Fly me to the moon

10/14
2016
学习

使用css3动画给评论头像增加旋转效果

saber 撰写 7条回复 5,137次查看

刚才我给评论区头像添加了鼠标经过旋转的效果，是使用css3动画做的。

在css样式表里先定义一个旋转的动画，然后在鼠标经过头像时触发动画：

@keyframes rotate_once{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.comment-meta .avatar:hover{
	animation: rotate_once .5s;
}

有时候必须结合JavaScript事件播放动画的时候，可以先把animation那句放到一个单独的class名里，然后通过JavaScript来动态添加、删除改动画的className，来达到播放动画或去除动画的效果。

示例：

element.addEventListener("mouseover",function(){
	element.className=nowClassName+" rotate_once";
	element.addEventListener("animationend",function(){
		element.className=nowClassName;
	})
});

鼠标经过元素时添加rotate_once这个className，播放动画。动画播放完毕之后再去掉这个className。

这里有个知识点，就是JavaScript里有三个能监听动画播放的事件：

animationStart 动画开始执行
animationEnd 动画执行结束
animationIteration  重复动画开始执行（只有重复动画才会触发）

使用css3动画给评论头像增加旋转效果

10/4
2014
学习

css3的旋转动画一例

saber 撰写 7条回复 2,294次查看

今天在看某网站的时候发现鼠标经过用户头像，会产生360°旋转的效果，我意识到这应该是个css3的动画效果。可是css3我也没怎么实践过，于是审查元素，最后发现了代码。

对某一元素或者选择器设置：

a:hover{
transition:all .5s;/*所有动画效果过渡时间为0.5秒*/
-webkit-transform:rotate(360deg);/*旋转360度*/
}

刚开始我确实对所有的a标签这样设置了，结果极其丧病，后来去掉了正文部分的旋转效果。

css3的旋转动画一例