大致效果就是这个样子了,下面是B2主题,知更鸟主题和其它主题添加头像左右摆动的代码
B2主题
/*头像摆动*/ .user-w-avatar .avatar-parent img,.img-ip:hover{ -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)}
知更鸟主题
/*头像摆动*/ .about-img img,.author-avatar img,.img-ip:hover{ -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)}
其它主题
/*头像摆动*/ .about-img img,.img-ip:hover{ -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)}
修改about-img,这个懂的应该都知道,这里就不做解释了
未经允许不得转载:作者:浅安,
转载或复制请以 超链接形式 并注明出处 浅安博客。
原文地址:《wordpress B2主题以及知更鸟添加进入网站头像左右摆动(适用所有主题所有cms)》 发布于2020-09-11
发表评论 抢沙发