可以使用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;