• 旋转CSS:
  • 说明:
  • 首页
  • 渗透
  • 折腾
  • 转载
  • 关于Me
  • 榜上有名
  • 文章存档
  • 友情链接

不妨看看这里

会员面板

Base64 Image

wordpress 头像旋转特效

  • Mr.Wu
  • 2017-04-28
  • 0
可以使用css3实现wordpress 头像旋转特效,今天正好给博客添加上了这个效果,记录一下。

旋转CSS:

@keyframes myfirst
{
    from {
    	 transform:rotateY(0deg);
     -webkit-transform:rotateY(0deg);
    }
    to {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
    }
}
 
@-webkit-keyframes myfirst 
{
   from {
    	 transform:rotateY(0deg);
     -webkit-transform:rotateY(0deg);
    }
    to {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg)
    }
}
然后在头像的class属性里加上:
animation: myfirst 4s infinite;
-webkit-animation: myfirst 4s infinite; 

说明:

如果想要上下翻滚便将如下代码替换:
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
替换为
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
animation: myfirst 4s infinite;  //4s表示时间,infinite表示一直,如果只想打开时特效一次,那么便删除infinite
-webkit-animation: myfirst 4s infinite; 
© 2025 MrWu
Theme by Wing-child
  • {{ item.name }}
  • {{ item.name }}