• 歡迎訪問奇跡の海網站,本站不上傳任何資源,所有資源均來自于網絡,歡迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下載資源為網絡上收集整理而來,并且以計算機技術研究交流為目的,版權歸原作者所有,僅供大家參考,學習,不存在任何商業目的與商業用途.
  • 本站系統鏡像均來自于官方原版,ed2k可視為P2P下載鏈接。所有操作系統默認均為試用版,如有正版密鑰可以有效激活,本站不提供任何激活和相關服務。

WordPress 頭像設置為圓角,鼠標觸碰后旋轉效果

WP插件 奇跡の海 3年前 (2017-04-22) 701次瀏覽 已收錄 0個評論 掃描二維碼

多說評論,在后臺使用CSS將評論的頭像改為圓角,鼠標觸摸后頭像會有轉動的效果

其實在WordPress的默認評論中也可以使用,效果如下:

WordPress 頭像設置為圓角,鼠標觸碰后旋轉效果

方法很簡單,在/wp-content/themes/目錄下,找到你當前使用的主題的文件夾,進入后,找到style.css,將下面的代碼復制后,粘貼到style.css文件的最下面,然后保存即可

 

.avatar{float:left;margin-right:8px;padding:1px;border:1px solid #cfd9e1;width:40px;height:40px; /*設置圖像的長和寬*/   
border-radius: 20px;/*設置圖像圓角效果,在這里我直接設置了超過width/2的像素,即為圓形了*/   
-webkit-border-radius: 20px;/*圓角效果:兼容webkit瀏覽器*/   
-moz-border-radius:20px;   
box-shadow: inset 0 -1px 0 #3333sf;/*設置圖像陰影效果*/   
-webkit-box-shadow: inset 0 -1px 0 #3333sf;   
-webkit-transition: 0.4s;       
-webkit-transition: -webkit-transform 0.4s ease-out;   
transition: transform 0.4s ease-out;/*變化時間設置為0.4秒(變化動作即為下面的圖像旋轉360度)*/   
-moz-transition: -moz-transform 0.4s ease-out;   
}    
.avatar:hover{/*設置鼠標懸浮在頭像時的CSS樣式*/   
box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
transform: rotateZ(360deg);/*圖像旋轉360度*/   
-webkit-transform: rotateZ(360deg);   
-moz-transform: rotateZ(360deg); } 

修改的時候,可以根據上面綠色的注釋進行修改,比如頭像的大小,旋轉的角度,時間等等


版權聲明:本站所有文章和資源使用CC BY-NC-SA 4.0協議授權發布 , 轉載應當以相同方式注明文章來自“SeaOMC.COM->WordPress 頭像設置為圓角,鼠標觸碰后旋轉效果!在下邊可以分享本文哦!
喜歡 (0)
[]
分享 (0)
奇跡の海
關于作者:
一個WordPress菜鳥!
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
中国福利彩票36选7开奖结果