知更鳥主題原來的特效在鼠標經過的時候是并不會變成圓的，也沒有如圖顯示的綠色陰影效果。
在原來的基礎如你所見，是在Style.css文件添加了以下幾行代碼實現的。
![圖片[2]-知更鳥begin主題美化給評論頭像添加旋轉變圓特效-馬找錢網絡營銷學習網](https://www.xgboke.com/wp-content/uploads/2018/08/2018080709260681.gif)
![圖片[3]-知更鳥begin主題美化給評論頭像添加旋轉變圓特效-馬找錢網絡營銷學習網](https://www.xgboke.com/wp-content/uploads/2018/08/2018080709260975.gif)
- /**頭像旋轉的效果**/
- .avatar{
- ???-webkit-transition:0.4s;
- ???-webkit-transition:-webkit-transform?0.4s?ease-out;
- ???transition:transform?0.4s?ease-out;
- ???-moz-transition:-moz-transform?0.4s?ease-out;
- }
- .avatar:hover{
- ???transform:rotateZ(360deg);
- ???-webkit-transform:rotateZ(360deg);
- ???-moz-transform:rotateZ(360deg);
- }
第二步，在Style.css中查找以下代碼并用新代碼直接覆蓋。
舊代碼：
- .vcard?.avatar?{
- ????float:?left;
- ????width:?64px;
- ????height:?64px;
- ????margin:?7px?10px?0?0;
- ????padding:?3px;
- ????border-radius:?5px;
- ????border:?1px?solid?#ddd;
- ????transition:?all?0.8s?ease?0s;
- }
用以下新代碼直接替換。
- .vcard?.avatar?{
- ????box-shadow:0px?0px?1px;
- ????float:?left;
- ????width:?40px;
- ????height:?40px;
- ????margin:?6px?10px?0?0;
- ????padding:?2px;
- ????border:?1px?solid?#ddd;
- ????transition:?all?0.8s?ease?0s;
- ????-webkit-transition:?all?0.8s?ease?0s;
- ????-moz-transition:?all?0.8s?ease?0s;
- ????-o-transition:?all?0.8s?ease?0s;
- ????-ms-transition:?0.8s;
- }
- .vcard:hover?.avatar?{
- ????box-shadow:0px?0px?10px?#0c0;
- ????transform:?rotate(720deg);
- ????-webkit-transform:?rotate(720deg);
- ????-moz-transform:?rotate(720deg);
- ????-o-transform:?rotate(720deg);
- ????-ms-transform:?rotate(720deg);
- ????border-radius:40px!important;
- ????filter:alpha(opacity=100)!important;
- ????opacity:1!important;
- }
好了給評論頭像添加旋轉變圓特效就成了。
? 版權聲明
馬找錢網絡營銷教程版權聲明：
1、本站所發布的一切學習教程、軟件等僅限用于學習體驗和研究目的，請自覺下載后24小時內刪除。
2、嚴禁用于其他用途，如果你喜歡教程，請支持正版教程軟件，得到更好的正版服務。
3、本站內容全部來自網絡，版權爭議與本站無關，如果您認為侵犯了您的合法權益，請聯系我們刪除。
4、對于不當轉載或引用本網站內容而引起的民事紛爭、行政處理或其他損失，本網站不承擔責任。
5、對不遵守本聲明或其他違法、惡意使用本網站內容者，本網站保留追究其法律責任的權利。
1、本站所發布的一切學習教程、軟件等僅限用于學習體驗和研究目的，請自覺下載后24小時內刪除。
2、嚴禁用于其他用途，如果你喜歡教程，請支持正版教程軟件，得到更好的正版服務。
3、本站內容全部來自網絡，版權爭議與本站無關，如果您認為侵犯了您的合法權益，請聯系我們刪除。
4、對于不當轉載或引用本網站內容而引起的民事紛爭、行政處理或其他損失，本網站不承擔責任。
5、對不遵守本聲明或其他違法、惡意使用本網站內容者，本網站保留追究其法律責任的權利。
THE END
暫無評論內容