最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > html/css/js教程 >

css实现多说头像圆形旋转特效

时间:2014-06-03 15:59来源:未知 作者:VCPHP网站模板 点击:
又是好多天没有写文章了,最近一段时间一直在弄驾照的事情,而且还要为自己做的品牌弄这弄那的。今天终于有了些闲暇的时间,便整理一篇有关wordpress评论系统头像的特效文章吧。至于那

又是好多天没有写文章了,最近一段时间一直在弄驾照的事情,而且还要为自己做的品牌弄这弄那的。今天终于有了些闲暇的时间,便整理一篇有关wordpress评论系统头像的特效文章吧。至于那个利用wordpress搭建企业站点的系列文章还要整理下思绪推出后续文章,今天估计是不够时间去捯饬了,一直在等待的朋友还需再耐心等待一下,明天总要弄出一篇后续文章出来的。

今天给大家提供的小技巧,其实并不算是很新鲜的话题了,而且在很多技术博客中都会有相似的文章存在。话说这个站点是主要针对一些wordpress用户的,更全面的相关文章汇总才是建站的最终目的,所以补上这篇文章也仅仅是为了wordpress教程的补足而已,知道这个方法的朋友完全可以无视掉。

多说评论插件的使用面积还是挺大的,好多人懒的去捯饬那简易的不能再简易的wordpress自带评论系统,多说自然是一个不错的选择。但对于一些热衷于DIY、动手能力比较强的朋友,还是渴望着自己去捯饬默认的评论系统来实现更加个性化的模式。我的评论系统一直有问题,在chrome浏览器下当评论出现翻页时会出现错位、空位及不能正常显示的bug,肯定是因为css代码部分出的问题,一直说要去修改也总是被其他琐事所遗忘。反正这个个人小站最终还要进行改版,赶上扁平化设计的潮流,等有时间去捯饬吧!

很多朋友看中了多说评论插件的那个圆形的、当鼠标划过时会旋转的评论头像特效,总认为实现起来很麻烦。其实方法异常的简单,只要用css进行一些美化就完全可以实现了。因为css代码是css3的,所以并不难呢过被一些以ie9版本以下的浏览器所兼容,所以如果您所面对的受众中使用ie9版本以下浏览器的比例过多,还请您慎重选择。当然了,一个完整的网站设计也必然要预备几套方案出来,以适用不同的浏览器版本,使得不同浏览器版本下都能显示较好的显示效果。

不再废话了,直接来方法吧!

请打开您所使用主题的主题包,打开style.css文件,并在里面写上下面一些代码:

  1. .avatar {   
  2.   float:left;   
  3.   margin-right:8px;   
  4.   padding:1px;   
  5.   border:1px solid #cfd9e1;   
  6.   width:40px;   
  7.   height:40px; /*设置头像的长和宽*/      
  8.   border-radius: 20px;/*设置头像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/      
  9.   -webkit-border-radius: 20px;/*圆角效果:兼容webkit浏览器*/      
  10.   -moz-border-radius:20px;      
  11.   box-shadow: inset 0 -1px 0 #3333sf;/*设置头像阴影效果*/      
  12.   -webkit-box-shadow: inset 0 -1px 0 #3333sf;      
  13.   -webkit-transition: 0.4s;          
  14.   -webkit-transition: -webkit-transform 0.4s ease-out;      
  15.   transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度)*/      
  16.   -moz-transition: -moz-transform 0.4s ease-out;      
  17. }       
  18. .avatar:hover {   
  19.   /*鼠标滑过,图像旋转*/      
  20.   box-shadow: 0 0 10px #fff;    
  21.   rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);      
  22.   -webkit-box-shadow: 0 0 10px #fff;    
  23.   rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);      
  24.   transform: rotateZ(360deg);/*图像旋转360度*/      
  25.   -webkit-transform: rotateZ(360deg);      
  26.   -moz-transform: rotateZ(360deg);    
  27. }  

以上的代码我们仅仅加入了一些阴影、圆形及鼠标滑过旋转三个特效,您完全可以根据上面的代码去调整出自己与众不同的效果,比如缩小圆角的大小而弄成圆角矩形,也可以调整头像宽高而成椭圆形,更可以使用css滤镜中的反相、黑白或者透明度增减而实现更丰富的鼠标悬停效果。

OK!今天的内容就先到这里吧,接下来的几天会有些闲暇时间,我会尽力去捯饬一些文章出来的。

(责任编辑:最模板)
------分隔线----------------------------
栏目列表
推荐内容