WordPress网站主题中鼠标移至会员头像旋转效果的实现方法

图片[1]-WordPress网站主题中鼠标移至会员头像旋转效果的实现方法-精品资源网

WordPress鼠标移至会员头像旋转效果的实现方法,其实很简单,把下面的代码添加到你正在使用的主题CSS样式中,或者在后台主题设置里面,添加到头部CSS自定义代码的区域。代码如下:

/鼠标移动至头像旋转/
.avatar{
-webkit-transition:0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
-moz-transition:-moz-transform 0.4s ease-out;
}
.avatar:hover{
transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
}

刷新页面,试试看,你的会员头像是不是旋转起来了,很酷哦!


下面是另一个代码,也可以实现这样的旋转效果:

/头像旋转的效果/
.avatar{padding:1px;border:1px solid #cfd9e1;width:64px;height:64px; /设置图像的宽和高,我设置的宽高都是64px,当然你可以根据你的主题自行修改/
border-radius: 100% !important;/设置图像圆角效果,这里我为了和主题的代码冲突,更改了优先级/
-webkit-border-radius: 100% !important;/圆角效果:兼容webkit浏览器/
-moz-border-radius:100% !important;/圆角效果:兼容火狐浏览器/
box-shadow: inset 0 -1px 0 #3333sf;/设置图像阴影效果/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;/变化时间设置为0.4秒,这个时间也可以根据需要自行修改(变化动作即为下面的图像旋转720度)/
-moz-transition: -moz-transform 0.4s ease-out;
}
.avatar:hover{/设置鼠标悬浮在头像时的CSS样式/
box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
transform: rotateZ(720deg);/图像旋转720度,这个旋转角度你也可以自己设置。/
-webkit-transform: rotateZ(720deg);
-moz-transform: rotateZ(720deg);
}

刷新页面,试试看,你的会员头像是不是旋转起来了,很酷哦!

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片