wordpress网站评论用户头像鼠标经过放大旋转特效css代码分享

摘要

网站加入访客头像特效旋转放大css特效代码可以让人眼前一亮,很不错的一种小特效,第二度分享10款不同特效代码给大家,喜欢的就赶快加入自己网站中看看效果吧!具体特效可以参考本文以及本站头像特效!

wordpress不使用多说评论框也可以使评论很漂亮,首先要从评论者头像入手,鼠标放在头像上面,增加一种头像旋转放大特效是不是很炫,显得自己网站很灵活闪耀,当然这个就是自己添加的css风格代码效果。本文主要是推荐这个不常见的效果代码。因为看很多网站用的都是那种简单的旋转360度效果。

gravatar

gravatar

本站推荐头像css特效代码

本代码效果:【参见本页下面头像效果】
代码如下:

  1. .avatar:hover{  
  2.     animation: starrotate .8s; -moz-animation: starrotate .8s; -ms-animation: starrotate .8s; -webkit-animation: starrotate .8s; -o-animation: starrotate .8s;}  
  3. @keyframes starrotate{  
  4.  0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1); -o-transform:rotate(0deg) scale(1,1); transform:rotate(0deg) scale(1,1); opacity:1;}  
  5.  50% { -webkit-transform:rotate(540deg) scale(2,2);-moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2); -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }  
  6.  100%{ -webkit-transform:rotate(1080deg) scale(1,1);-moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1); -o-transform:rotate(1080deg) scale(1,1); transform:rotate(1080deg) scale(1,1); opacity:1;}  
  7. }  
  8. @-moz-keyframes starrotate{  
  9.  0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1);-o-transform:rotate(0deg) scale(1,1);transform:rotate(0deg) scale(1,1); opacity:1;}  
  10.  50% { -webkit-transform:rotate(540deg) scale(2,2);-moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2); -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }  
  11.  100%{ -webkit-transform:rotate(1080deg) scale(1,1);-moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1);-o-transform:rotate(1080deg) scale(1,1);transform:rotate(1080deg) scale(1,1); opacity:1;}  
  12. }  
  13. @-webkit-keyframes starrotate{  
  14.  0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1); -o-transform:rotate(0deg) scale(1,1); transform:rotate(0deg) scale(1,1); opacity:1;}  
  15.  50% { -webkit-transform:rotate(540deg) scale(2,2); -moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2); -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }  
  16.  100%{ -webkit-transform:rotate(1080deg) scale(1,1); -moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1); -o-transform:rotate(1080deg) scale(1,1); transform:rotate(1080deg) scale(1,1); opacity:1;}  
  17. }  
  18. @-o-keyframes starrotate{  
  19.  0% { -webkit-transform:rotate(0deg) scale(1,1); -moz-transform:rotate(0deg) scale(1,1);-ms-transform:rotate(0deg) scale(1,1);-o-transform:rotate(0deg) scale(1,1);transform:rotate(0deg) scale(1,1); opacity:1;}  
  20.  50% { -webkit-transform:rotate(540deg) scale(2,2); -moz-transform:rotate(540deg) scale(2,2);-ms-transform:rotate(540deg) scale(2,2); -o-transform:rotate(540deg) scale(2,2); transform:rotate(540deg) scale(2,2); opacity:0.5; }  
  21.  100%{ -webkit-transform:rotate(1080deg) scale(1,1); -moz-transform:rotate(1080deg) scale(1,1);-ms-transform:rotate(1080deg) scale(1,1); -o-transform:rotate(1080deg) scale(1,1); transform:rotate(1080deg) scale(1,1); opacity:1;}  
  22. }  

9特效预览效果

另外增加几个效果的css代码:
【来源:v说

效果1

效果1


效果2

效果2


效果3

效果3


效果4

效果4


效果5

效果5


效果6

效果6


效果7

效果7


效果8

效果8


效果9

效果9

9特效CSS下载

发表评论

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

目前评论:1   其中:访客  1   博主  0

  1. 霸道女士 0 来自天朝的朋友 谷歌浏览器 Windows 10 云南省曲靖市 电信

    看看效果