SCLUB免費論壇申請-使用者論壇's Archiver

无界 發表於 2017-4-1 10:37

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

[i=s] 本帖最後由 无界 於 2017-4-1 11:10 編輯 [/i]

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

鼠标移入后旋转效果[code].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}
.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)}[/code][attach]77304[/attach]

鼠标移入后[color=Red]缩小[/color]加旋转效果[code].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}
.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)}[/code][attach]77306[/attach]

鼠标移入后[color=Blue]放大[/color]加旋转效果[code].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}
.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)}[/code][attach]77305[/attach]

三种效果自选

xpstone 發表於 2017-4-1 11:21

感谢无界大人

xpstone 發表於 2017-4-1 11:23

我不想改变头像圆圈化,只要头像旋转怎么做

无界 發表於 2017-4-1 11:24

[b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=281175&ptid=33398]3#[/url] [i]xpstone[/i] [/b]


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

xpstone 發表於 2017-4-1 11:28

[b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=281176&ptid=33398]4#[/url] [i]无界[/i] [/b]


    就是这个效果 谢谢

4rphotoclub 發表於 2017-4-1 12:54

这十分棒的教学,一定要好好收下来,学习学习!

繽紛色彩 發表於 2017-4-1 14:49

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

bonimon 發表於 2017-4-1 14:56

不错的效果!

IndianaJones 發表於 2017-4-2 17:17

好久不见,无界又发新教学了!

21648069 發表於 2017-4-2 20:29

[b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=281171&ptid=33398]1#[/url] [i]无界[/i] [/b]

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

无界 發表於 2017-4-2 20:48

[b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=281244&ptid=33398]10#[/url] [i]21648069[/i] [/b]


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

21648069 發表於 2017-4-3 00:53

[b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=281247&ptid=33398]11#[/url] [i]无界[/i] [/b]

原來如此,漲知識了

頁: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.