子比主题美化 – 头像左右晃动代码

此页面的默认 H1 标题

每次刷新页面会自动晃动头像,非常有意思的一款美化。感觉意义不大就一直没发布出来,应该还是会有人喜欢吧~

效果展示

教程开始

后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式

/*头像左右晃动*/
.user-avatar .avatar-img, .img-ip:hover, .w-a-info img {
   -webkit-animation: swing 3s .4s ease both;
   -moz-animation: swing 3s .4s ease both;
}
@-webkit-keyframes swing {
   20%, 40%, 60%, 80%, 100% {
       -webkit-transform-origin:top center
   }
   20% {
       -webkit-transform:rotate(15deg)
   }
   40% {
       -webkit-transform:rotate(-10deg)
   }
   60% {
       -webkit-transform:rotate(5deg)
   }
   80% {
       -webkit-transform:rotate(-5deg)
   }
   100% {
       -webkit-transform:rotate(0deg)
   }
}
@-moz-keyframes swing {
   20%, 40%, 60%, 80%, 100% {
       -moz-transform-origin:top center
   }
   20% {
       -moz-transform:rotate(15deg)
   }
   40% {
       -moz-transform:rotate(-10deg)
   }
   60% {
       -moz-transform:rotate(5deg)
   }
   80% {
       -moz-transform:rotate(-5deg)
   }
   100% {
       -moz-transform:rotate(0deg)
   }
}

 

上一篇 子比主题美化-弹出模拟框增加提醒
下一篇 子比 美化秘籍_1 分钟学会纯代码修改鼠标指针