用css来做动态的转脸

 2015-06-05 21:47

在我们做网站的时候,很喜欢加一点特别的元素,让网站看起来动感足点。通过html5+CSS3的部分属性,我们可以给我们的头像转动起来,就像这样:

经过我简单研究了下,咨询了下朋友,发现越来实现这个很简单,只是一些CSS就可以实现了。代码如下:

.textIMG{border-radius:20%;}
.textIMG:hover{
        border-radius:50%;
        -webkit-transform: rotate(720deg);
	-moz-transform: rotate(720deg);
	-ms-transform: rotate(720deg);
	-o-transform: rotate(720deg);
	transform: rotate(720deg);
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition: 1s;
}

这段代码说起来很十分简单。首先,给我们图片一个css,让他的有一段的边缘倒角,我们可以初步控制在20%。然后,设置一个hover鼠标除非命令,让它倒角到50%的强力,并且给图标加上一个自动旋转720度的命令,然后给了一个1秒的时间。这样,整体看起来就像图片在1秒里做了这样的一个动作:自动旋转720度,并且倒角到一个圆形的模式。

相信有点代码基础的朋友都应该明白了,那么就可以大家的变化使用了。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: