免費論壇

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

分享

SCLUB免費論壇申請-使用者論壇 » Discuz--代碼美化 » 帖内头像圆角且鼠标放在上面头像360度旋转【补发】

返回列表發帖

Rank: 7 Rank: 7 Rank: 7

積分: 5068
威望: 5068
金錢: 2878
最後登錄: 2024-11-25

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老

1^# 跳轉到 » 倒序看帖

字體大小: tT

无界發表於 2017-4-1 10:37 | 只看該作者

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

本帖最後由无界於 2017-4-1 11:10 編輯

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

鼠标移入后旋转效果

.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)}

複製代碼

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

.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)}

複製代碼

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

.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)}

複製代碼

三种效果自选

2 評分人數

謝謝分享 威望 + 5 金錢 + 5

繽紛色彩
我很贊同 威望 + 8 金錢 + 8

4rphotoclub

爱秀代码

Rank: 2

積分: 139
威望: 139
金錢: 1
最後登錄: 2017-4-6

2^#

xpstone發表於 2017-4-1 11:21 | 只看該作者

感谢无界大人

Rank: 2

積分: 139
威望: 139
金錢: 1
最後登錄: 2017-4-6

3^#

xpstone發表於 2017-4-1 11:23 | 只看該作者

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

Rank: 7 Rank: 7 Rank: 7

積分: 5068
威望: 5068
金錢: 2878
最後登錄: 2024-11-25

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老

4^#

无界發表於 2017-4-1 11:24 | 只看該作者

回復 3# xpstone

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

Rank: 2

積分: 139
威望: 139
金錢: 1
最後登錄: 2017-4-6

5^#

xpstone發表於 2017-4-1 11:28 | 只看該作者

回復 4# 无界

就是这个效果谢谢

Rank: 7 Rank: 7 Rank: 7

積分: 8659
威望: 8659
金錢: 10077
最後登錄: 2024-11-24

中級會員高級會員金牌會員論壇元老正式版主資深版主熱心會員

6^#

4rphotoclub發表於 2017-4-1 12:54 | 只看該作者

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

歡迎大家齊來加入4R網上攝影會

Rank: 7 Rank: 7 Rank: 7

積分: 6715
威望: 6715
金錢: 8590
最後登錄: 2024-3-9

熱心會員正式版主實習版主中級會員高級會員金牌會員論壇元老

7^#

繽紛色彩發表於 2017-4-1 14:49 | 只看該作者

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

交换论坛链结

Rank: 7 Rank: 7 Rank: 7

積分: 7573
威望: 7573
金錢: 9482
最後登錄: 2024-11-17

正式版主資深版主貢獻特別級會員熱心會員論壇元老金牌會員高級會員中級會員

8^#

bonimon發表於 2017-4-1 14:56 | 只看該作者

不错的效果！

请访问【不错吧 BEST FORUM】更多SCLUB美化资源

Rank: 4

積分: 742
威望: 742
金錢: 4
最後登錄: 2024-11-23

中級會員高級會員

9^#

IndianaJones發表於 2017-4-2 17:17 | 只看該作者

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

Rank: 7 Rank: 7 Rank: 7

積分: 873
威望: 873
金錢: 199
最後登錄: 2024-3-30

中級會員高級會員正式版主

10^#

21648069發表於 2017-4-2 20:29 | 只看該作者

回復 1# 无界

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