css效果:图片圆形并鼠标悬停时图片360度转动

2020年04月25日

原创内容,转载请注明出处:https://www.myzhenai.com.cn/post/3280.html
关键字:css效果 鼠标悬停 图片转动

这个教程我是参考网上的一个方法修改的,原本是想给我儿子的博客弄个动态的头像,后面觉得很好玩,于是我便又折腾着给我的两个博客所有首页图片都添加了这个功能,我使用的方法见我别一个文章。

这个方法的重点在于找到对应的规则,然后需要为该规则设置一些内容和添加一个hover悬停事件。

JiaYu Blog演示:https://jiayu.mybabya.com/
WordPress模板Diy记录:https://www.myzhenai.com.cn/post/3266.html
WordPress鼠标悬停变色的修改方法:https://www.myzhenai.com.cn/post/3253.html

网上原文

<style type="text/css">
.mydiv{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    margin: 0 auto;
    background: no-repeat url(https://jiayu.mybabya.com/wp-content/uploads/2012/07/IMGSRC_20121125033520.jpg) left top;
    -webkit-background-size: 150px 150px;
    -moz-background-size: 150px 150px;
    background-size: 150px 150px;
    -webkit-border-radius: 75px;
    border-radius: 75px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
       }
.mydiv:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
</style>

mybabya

.format-gallery .size-thumbnail img,
.category-gallery .size-thumbnail img {
    border: 10px solid #f1f1f1;
    margin-bottom: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
    background: no-repeat left top;
    -webkit-background-size: 150px 150px;
    -moz-background-size: 150px 150px;
    background-size: 150px 150px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.format-gallery .size-thumbnail img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

myzhenai

.article-container article .feat-img a img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: no-repeat left top;
  -webkit-background-size: 150px 150px;
  -moz-background-size: 150px 150px;
  background-size: 150px 150px;
  -webkit-border-radius: 90px;
  border-radius: 90px;
  -webkit-transition: -webkit-transform 2s ease-out;
  -moz-transition: -moz-transform 2s ease-out;
  -o-transition: -o-transform 2s ease-out;
  -ms-transition: -ms-transform 2s ease-out;
}
.article-container article .feat-img a img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

#slider .slide .book-cover img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0 auto;
  background: no-repeat left top;
  -webkit-background-size: 150px 150px;
  -moz-background-size: 150px 150px;
  background-size: 150px 150px;
  -webkit-border-radius: 90px;
  border-radius: 90px;
  -webkit-transition: -webkit-transform 2s ease-out;
  -moz-transition: -moz-transform 2s ease-out;
  -o-transition: -o-transform 2s ease-out;
  -ms-transition: -ms-transform 2s ease-out;
}
#slider .slide .book-cover img:hover {
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  -o-transform: rotateZ(360deg);
  -ms-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}


sicnature ---------------------------------------------------------------------
Your current IP address is: 3.235.193.1
Your IP address location: 美国 弗吉尼亚州阿什本amazon数据中心
Your IP address country and region: 美国 美国
Your current browser is:
Your current system is:
Original content, please indicate the source:
同福客栈论坛 | 蟒蛇科普海南乡情论坛 | JiaYu Blog
sicnature ---------------------------------------------------------------------
Welcome to reprint. Please indicate the source http://myzhenai.com/post/3280.html

没有评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注