原创内容,转载请注明出处: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
网上原文
.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); }
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 ---------------------------------------------------------------------
I P 地 址: 3.238.82.77
区 域 位 置: 美国弗吉尼亚阿什本
系 统 信 息:
Original content, please indicate the source:
同福客栈论坛 | 蟒蛇科普 | 海南乡情论坛 | JiaYu Blog
sicnature ---------------------------------------------------------------------
Welcome to reprint. Please indicate the source https://www.myzhenai.com.cn/post/3280.html
没有评论