新聞中心

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

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

無(wú)憂小編今天在逛wordpress大學(xué)的時(shí)候發(fā)現(xiàn)了一個(gè)很好玩的功能，在查看用戶對(duì)文章評(píng)論時(shí),鼠標(biāo)放在用戶頭像上會(huì)自己旋轉(zhuǎn)，小編覺得這是給網(wǎng)站美化加分的一個(gè)很好的方法，對(duì)在無(wú)憂主機(jī)php空間上運(yùn)行的wordpress會(huì)很有幫助。如下是無(wú)憂小編在wordpress大學(xué)截的旋轉(zhuǎn)頭像功能。看此功能好玩于是無(wú)憂小編親自測(cè)試，然后用最簡(jiǎn)單的表達(dá)方法介紹給大家，廢話不多說(shuō)了下面跟著無(wú)憂小編一步步的操作！第一步：用FTP或者其他工具進(jìn)入根目錄（無(wú)憂主機(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è)置圖像的長(zhǎng)和寬*/ 
border-radius: 20px;/*設(shè)置圖像圓角效果,在這里我直接設(shè)置了超過(guò)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í)間設(shè)置為0.4秒(變化動(dòng)作即為下面的圖像旋轉(zhuǎn)360度）*/ 
-moz-transition: -moz-transform 0.4s ease-out; 
} 
.avatar:hover{/*設(shè)置鼠標(biāo)懸浮在頭像時(shí)的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); }

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