知更鳥begin主題美化給評論頭像添加旋轉變圓特效

  • A+
所屬分類:知更鳥begin美化

知更鳥begin主題美化給評論頭像添加旋轉變圓特效

知更鳥主題原來的特效在鼠標經過的時候是并不會變成圓的,也沒有如圖顯示的綠色陰影效果。

在原來的基礎如你所見,是在Style.css文件添加了以下幾行代碼實現的。

知更鳥begin主題美化給評論頭像添加旋轉變圓特效
 

知更鳥begin主題美化給評論頭像添加旋轉變圓特效
第一步,首先在Style.css中添加以下代碼

  1. /**頭像旋轉的效果**/
  2. .avatar{
  3. ???-webkit-transition:0.4s;
  4. ???-webkit-transition:-webkit-transform?0.4s?ease-out;
  5. ???transition:transform?0.4s?ease-out;
  6. ???-moz-transition:-moz-transform?0.4s?ease-out;
  7. }
  8. .avatar:hover{
  9. ???transform:rotateZ(360deg);
  10. ???-webkit-transform:rotateZ(360deg);
  11. ???-moz-transform:rotateZ(360deg);
  12. }

第二步,在Style.css中查找以下代碼并用新代碼直接覆蓋。

舊代碼:

  1. .vcard?.avatar?{
  2. ????float:?left;
  3. ????width:?64px;
  4. ????height:?64px;
  5. ????margin:?7px?10px?0?0;
  6. ????padding:?3px;
  7. ????border-radius:?5px;
  8. ????border:?1px?solid?#ddd;
  9. ????transition:?all?0.8s?ease?0s;
  10. }

用以下新代碼直接替換。

  1. .vcard?.avatar?{
  2. ????box-shadow:0px?0px?1px;
  3. ????float:?left;
  4. ????width:?40px;
  5. ????height:?40px;
  6. ????margin:?6px?10px?0?0;
  7. ????padding:?2px;
  8. ????border:?1px?solid?#ddd;
  9. ????transition:?all?0.8s?ease?0s;
  10. ????-webkit-transition:?all?0.8s?ease?0s;
  11. ????-moz-transition:?all?0.8s?ease?0s;
  12. ????-o-transition:?all?0.8s?ease?0s;
  13. ????-ms-transition:?0.8s;
  14. }
  15. .vcard:hover?.avatar?{
  16. ????box-shadow:0px?0px?10px?#0c0;
  17. ????transform:?rotate(720deg);
  18. ????-webkit-transform:?rotate(720deg);
  19. ????-moz-transform:?rotate(720deg);
  20. ????-o-transform:?rotate(720deg);
  21. ????-ms-transform:?rotate(720deg);
  22. ????border-radius:40px!important;
  23. ????filter:alpha(opacity=100)!important;
  24. ????opacity:1!important;
  25. }

好了給評論頭像添加旋轉變圓特效就成了。

  • 我的微信
  • 技術支持添加二維碼
  • weinxin
  • 我的QQ二維碼
  • 教程下載請掃二維碼
  • weinxin
馬找錢

發表評論

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: