您好,现在是 2024年11月22日 22点51分 星期五

css3图片旋转效果 实现炫酷的评论者头像

不得不承认css3展现特效的华丽,但是部分浏览器还是不能。
但是这也不能妨碍我们猎奇的心。


实现评论列表评论者的头像旋转特效,之前是在一个博客里看到的,于是回来试试。
其实很简单,只要你复制一下Css样式即可。

 

1
2
3
/*img css*/
ol.commentlist li div.vcard img.avatar {width:40px;height:40px;position:relative;float: left;margin: 4px 6px 0 0;padding: 2px;border:1px solid #ddd;background: #fff;-webkit-transition:.8s;-moz-transition:.8s;-o-transition:.8s;-ms-transition:.8s;}
ol.commentlist li div.vcard img.avatar:hover{transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);border-radius:23px;}

放到你的主题样式里,ctrl+f5刷新鼠标移上评论列表图形看一下效果。

 

本文固定链接: http://www.28ditan.com/index.php/bc-471 | 地坛 分享 | +复制链接

文章转载请注明: css3图片旋转效果 实现炫酷的评论者头像 | 地坛 分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。