（转自星光博客）知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的，也没有如图显示的绿色阴影效果。（此代码适用于任何主题，行适当修改class就行）
在原来的基础如你所见，是在Style.css文件添加了以下几行代码实现的。
第一步，首先在Style.css中添加以下代码
- /**头像旋转的效果**/
- .avatar{
- -webkit-transition:0.4s;
- -webkit-transition:-webkit-transform 0.4s ease-out;
- transition:transform 0.4s ease-out;
- -moz-transition:-moz-transform 0.4s ease-out;
- }
- .avatar:hover{
- transform:rotateZ(360deg);
- -webkit-transform:rotateZ(360deg);
- -moz-transform:rotateZ(360deg);
- }
第二步，在Style.css中查找以下代码并用新代码直接覆盖。
（注意：鸟哥主题可直接放入后台自定义风格图方便的，评论图像大小和时间可以看着修改，图像貌似小了点自己看着修改）
旧代码：
- .vcard .avatar {
- float: left;
- width: 64px;
- height: 64px;
- margin: 7px 10px 0 0;
- padding: 3px;
- border-radius: 5px;
- border: 1px solid #ddd;
- transition: all 0.8s ease 0s;
- }
用以下新代码直接替换。
- .vcard .avatar {
- box-shadow:0px 0px 1px;
- float: left;
- width: 40px;
- height: 40px;
- margin: 6px 10px 0 0;
- padding: 2px;
- border: 1px solid #ddd;
- transition: all 0.8s ease 0s;
- -webkit-transition: all 0.8s ease 0s;
- -moz-transition: all 0.8s ease 0s;
- -o-transition: all 0.8s ease 0s;
- -ms-transition: 0.8s;
- }
- .vcard:hover .avatar {
- box-shadow:0px 0px 10px #0c0;
- transform: rotate(720deg);
- -webkit-transform: rotate(720deg);
- -moz-transform: rotate(720deg);
- -o-transform: rotate(720deg);
- -ms-transform: rotate(720deg);
- border-radius:40px!important;
- filter:alpha(opacity=100)!important;
- opacity:1!important;
- }
文章参考来源：堆爱博客 http://duiai.cc/comments-round-the-heads-add-rotation-effects.html/comment-page-3/#comments
声明：站长码字很辛苦啊,转载时请保留本声明及附带文章链接：https://blog.tag.gg/showinfo-19-18742-0.html
亲爱的：若该文章解决了您的问题,可否收藏+评论+分享呢？
文章评论 本文章有个评论