免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [教學] 帖内头像圆角且鼠标放在上面头像360度旋转【补发】 [打印本頁]
作者: 无界    時間: 2017-4-1 10:37     標題: 帖内头像圆角且鼠标放在上面头像360度旋转【补发】

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

将下边代码放到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)}
複製代碼
1.gif

鼠标移入后缩小加旋转效果
  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)}
複製代碼
3.gif

鼠标移入后放大加旋转效果
  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)}
複製代碼
2.gif

三种效果自选

圖片附件: 1.gif (2017-4-1 11:09, 191.95 KB) / 下載次數 668
http://sclub.com.tw/discuz/attachment.php?aid=77304&k=fece712f65021a47fb3d24f0d8e6663f&t=1713530641&sid=iP5081



圖片附件: 2.gif (2017-4-1 11:09, 191.95 KB) / 下載次數 707
http://sclub.com.tw/discuz/attachment.php?aid=77305&k=8d62b559e7b8d61120ca9d73cb8d47a1&t=1713530641&sid=iP5081



圖片附件: 3.gif (2017-4-1 11:09, 527.9 KB) / 下載次數 676
http://sclub.com.tw/discuz/attachment.php?aid=77306&k=185c46bc995b0a72be2b1336c284de7c&t=1713530641&sid=iP5081

作者: xpstone    時間: 2017-4-1 11:21

感谢无界大人
作者: xpstone    時間: 2017-4-1 11:23

我不想改变头像圆圈化，只要头像旋转怎么做
作者: 无界    時間: 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);
作者: xpstone    時間: 2017-4-1 11:28

回復 4# 无界


    就是这个效果 谢谢
作者: 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

回復 1# 无界

其實把<style></style>加到代碼前後方，就可以直接放在其他頭部
作者: 无界    時間: 2017-4-2 20:48

回復 10# 21648069


    搜索引擎中的其他头部信息一般放一些搜索引擎关注的重点标签和内容，且代码放在头部影响全局，个人认为无关代码尽量少放在头部，影响收录。
作者: 21648069    時間: 2017-4-3 00:53

回復 11# 无界

原來如此，漲知識了



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://sclub.com.tw/discuz/) Powered by Discuz! 7.2