本文作者:花雾影

主题头像鼠标点击旋转css代码

花雾影1年前 ( 2019-11-02 )51747抢沙发
主题头像鼠标点击旋转css代码摘要: 今天为大家分享一段有意思的css代码,当移动鼠标指针指向头像时,头像就会进行360度旋转,现在我要分享给大家,希望喜欢。...

1cd82507779da5.jpg 主题头像鼠标点击旋转css代码 css代码 第1张

今天为大家分享一段有意思的css代码,当移动鼠标指针指向头像时,头像就会进行360度旋转,现在我要分享给大家,希望喜欢。

.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);

代码可直接复制到网站主题style.CSS文件中,喜欢的朋友赶紧试一下吧。

文章版权及转载声明

作者:花雾影本文地址:https://www.shuipo.net/blog/12.html发布于 1年前 ( 2019-11-02 )
文章转载或复制请以超链接形式并注明出处水泊网

赞(

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

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,51747人围观)参与讨论

还没有评论,来说两句吧...