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

Rank: 7Rank: 7Rank: 7

積分
5071 
威望
5071  
金錢
2879  
最後登錄
2025-4-4 

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老
1# 跳轉到 » 倒序看帖
打印
tT
无界發表於 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

三种效果自选
2

評分人數

收藏 分享
爱秀代码

Rank: 7Rank: 7Rank: 7

積分
5071 
威望
5071  
金錢
2879  
最後登錄
2025-4-4 

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老
2#
无界發表於 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);

TOP

Rank: 7Rank: 7Rank: 7

積分
5071 
威望
5071  
金錢
2879  
最後登錄
2025-4-4 

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老
3#
无界發表於 2017-4-2 20:48 | 顯示全部帖子
回復 10# 21648069


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

TOP

返回列表