新聞中心

實現(xiàn)WordPress評論中用戶頭像旋轉(zhuǎn)功能的方法介紹

作者 / 無憂主機(jī) 時間 2014-11-08 22:26:16

無憂小編今天在逛wordpress大學(xué)的時候發(fā)現(xiàn)了一個很好玩的功能，在查看用戶對文章評論時,鼠標(biāo)放在用戶頭像上會自己旋轉(zhuǎn)，小編覺得這是給網(wǎng)站美化加分的一個很好的方法，對在無憂主機(jī)php空間上運行的wordpress會很有幫助。如下是無憂小編在wordpress大學(xué)截的旋轉(zhuǎn)頭像功能。看此功能好玩于是無憂小編親自測試，然后用最簡單的表達(dá)方法介紹給大家，廢話不多說了下面跟著無憂小編一步步的操作！第一步：用FTP或者其他工具進(jìn)入根目錄（無憂主機(jī)根目錄是：public html）wp-content—themes—找到當(dāng)前使用主題—找到style.css文件下載到本地后用代碼編輯器打開，把如下的代碼添加到39行下面也就是最后一行了！

.avatar{float:left;margin-right:8px;padding:1px;border:1px solid #cfd9e1;width:40px;height:40px; /*設(shè)置圖像的長和寬*/ 
border-radius: 20px;/*設(shè)置圖像圓角效果,在這里我直接設(shè)置了超過width/2的像素，即為圓形了*/ 
-webkit-border-radius: 20px;/*圓角效果：兼容webkit瀏覽器*/ 
-moz-border-radius:20px; 
box-shadow: inset 0 -1px 0 #3333sf;/*設(shè)置圖像陰影效果*/ 
-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;/*變化時間設(shè)置為0.4秒(變化動作即為下面的圖像旋轉(zhuǎn)360度）*/ 
-moz-transition: -moz-transform 0.4s ease-out; 
} 
.avatar:hover{/*設(shè)置鼠標(biāo)懸浮在頭像時的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);/*圖像旋轉(zhuǎn)360度*/ 
-webkit-transform: rotateZ(360deg); 
-moz-transform: rotateZ(360deg); }

給大家一個詳細(xì)添加代碼的截圖如下：