當(dāng)前位置： 首頁(yè) > 常見(jiàn)問(wèn)題

(轉(zhuǎn)自星光博客)羅賓主題的原特效，鼠標(biāo)經(jīng)過(guò)時(shí)不會(huì)轉(zhuǎn)身，也沒(méi)有如圖所示的綠影效果。(此代碼適用于任何主題，適當(dāng)修改類即可)

在原來(lái)的基礎(chǔ)上，你可以看到，它是通過(guò)在Style.css文件中添加以下幾行代碼來(lái)實(shí)現(xiàn)的。

第一步是在Style.css中添加以下代碼

/**頭像旋轉(zhuǎn)的效果**/ .avatar{ ???-webkit-transition:.s; ???-webkit-transition:-webkit-transform?.s?ease-out; ???transition:transform?.s?ease-out; ???-moz-transition:-moz-transform?.s?ease-out; } .avatar:hover{ ???transform:rotateZ(deg); ???-webkit-transform:rotateZ(deg); ???-moz-transform:rotateZ(deg); }

第二步，在Style.css中找到下面的代碼，直接用新代碼覆蓋。

(注:鳥(niǎo)哥的主題可以直接放到后臺(tái)自定義風(fēng)格圖，方便。評(píng)論圖像的大小和時(shí)間可以通過(guò)查看來(lái)更改。圖像好像有點(diǎn)小，可以自己看著改)

舊代碼:

.vcard?.avatar?{ ????float:?left; ????width:?px; ????height:?px; ????margin:?px?px??; ????padding:?px; ????border-radius:?px; ????border:?px?solid?#ddd; ????transition:?all?.s?ease?s; }

直接替換為以下新代碼。

.vcard?.avatar?{ ????box-shadow:px?px?px; ????float:?left; ????width:?px; ????height:?px; ????margin:?px?px??; ????padding:?px; ????border:?px?solid?#ddd; ????transition:?all?.s?ease?s; ????-webkit-transition:?all?.s?ease?s; ????-moz-transition:?all?.s?ease?s; ????-o-transition:?all?.s?ease?s; ????-ms-transition:?.s; } .vcard:hover?.avatar?{ ????box-shadow:px?px?px?#c; ????transform:?rotate(deg); ????-webkit-transform:?rotate(deg); ????-moz-transform:?rotate(deg); ????-o-transform:?rotate(deg); ????-ms-transform:?rotate(deg); ????border-radius:px!important; ????filter:alpha(opacity=)!important; ????opacity:!important; }

文章來(lái)源:堆愛(ài)博客http://duai . cc/comments-round-the-heads-add-rotation-effects . html/comment-page-/# comments

作者：徐州百都網(wǎng)絡(luò) | 來(lái)源： | 發(fā)布于：2022-03-25 00:38:39