wordpress B2主题以及知更鸟添加进入网站头像左右摆动(适用所有主题所有cms)

首页 » 经验教程 » 正文

wordpress B2主题以及知更鸟添加进入网站头像左右摆动(适用所有主题所有cms)
大致效果就是这个样子了,下面是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

分享到:
赞(1) 打赏 生成海报
就爱代挂 - 最专业的QQ等级加速平台!

发表评论 抢沙发

6 + 9 =


长按图片转发给朋友

觉得文章有用可以打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册