RiPro主题美化:作者头像旋转动画效果

作者 : admin 本文共888个字,预计阅读时间需要3分钟 发布时间: 2021-05-27 共51人阅读

一个适合RIPRO主题的头像旋转动画,当移动鼠标指针指向头像时,头像就会进行360度旋转,样式很简单,现在免费分享给大家,希望大家收藏本站方便查看更多RiPro主题美化教程!

 

效果如下:

RiPro主题美化:作者头像旋转动画效果插图
头像旋转效果样式

美化教程:

1.直接复制下面代码到文件:/ripro/assets/css/diy.css 中,也可以复制到网站后台主题css中。

/**头像旋转效果样式 www.360mb.net**/
.avatar{padding1px;border1px solid #cfd9e1;width24px;height24px; 
border-radius 100% !important;
-webkit-border-radius 100% !important;
-moz-border-radius100% !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;
-moz-transition -moz-transform 0.4s ease-out;
}
.avatarhover{
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);
-webkit-transform rotateZ(720deg);
-moz-transform rotateZ(720deg); 

 

1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

360模板吧 » RiPro主题美化:作者头像旋转动画效果

发表评论