[教學] 帖内头像圆角且鼠标放在上面头像360度旋转【补发】

无界

将下边代码放到css_append模板最下边即可。

鼠标移入后旋转效果

1. .postauthor .avatar img{border-radius:50%;border:2px solid #fff;box-shadow:1px 1px 0 0 rgba(0,0,0,.2);transition:0.8s;-webkit-transition:0.8s;-moz-transition:0.8s}
   
2. .postauthor .avatar img:hover{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-ms-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1)}

複製代碼

下載 (191.95 KB)

2017-4-1 11:09

鼠标移入后缩小加旋转效果

1. .postauthor .avatar img{border-radius:50%;border:2px solid #fff;box-shadow:1px 1px 0 0 rgba(0,0,0,.2);transition:0.8s;-webkit-transition:0.8s;-moz-transition:0.8s}
   
2. .postauthor .avatar img:hover{-webkit-transform:rotate(360deg) scale(0.5);-moz-transform:rotate(360deg) scale(0.5);-ms-transform:rotate(360deg) scale(0.5);-o-transform:rotate(360deg) scale(0.5)}

複製代碼

下載 (527.9 KB)

2017-4-1 11:09

鼠标移入后放大加旋转效果

1. .postauthor .avatar img{border-radius:50%;border:2px solid #fff;box-shadow:1px 1px 0 0 rgba(0,0,0,.2);transition:0.8s;-webkit-transition:0.8s;-moz-transition:0.8s}
   
2. .postauthor .avatar img:hover{-webkit-transform:rotate(360deg) scale(1.5);-moz-transform:rotate(360deg) scale(1.5);-ms-transform:rotate(360deg) scale(1.5);-o-transform:rotate(360deg) scale(1.5)}

複製代碼

下載 (191.95 KB)

2017-4-1 11:09

三种效果自选

21648069

回復 11# 无界

原來如此，漲知識了

无界

回復 10# 21648069


    搜索引擎中的其他头部信息一般放一些搜索引擎关注的重点标签和内容，且代码放在头部影响全局，个人认为无关代码尽量少放在头部，影响收录。

21648069

回復 1# 无界

其實把<style></style>加到代碼前後方，就可以直接放在其他頭部

IndianaJones

好久不见，无界又发新教学了！

bonimon

不错的效果！

繽紛色彩

不錯啊
還有不同的效果
很正

4rphotoclub

这十分棒的教学，一定要好好收下来，学习学习！

xpstone

回復 4# 无界


    就是这个效果 谢谢

无界

回復 3# xpstone


    删掉border-radius:50%;border:2px solid #fff;box-shadow:1px 1px 0 0 rgba(0,0,0,.2);