可以使用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;
本文作者为Mr.Wu,转载请注明,尊守博主劳动成果!
由于经常折腾代码,可能会导致个别文章内容显示错位或者别的 BUG 影响阅读; 如发现请在该文章下留言告知于我,thank you !