前言
一直看着掘金主页点头像会加速旋转，自己也想写一个类似这种的特效，就是鼠标放图片上时图片会悬停，就是那种戳一下动一下的效果，本文会先分解实现的步骤，使用到知识点都会有案例，那么我们开始吧。
一.运行效果&在线体验地址
二.主要实现点解析
1.实现思路:
主要实现是使用了css中hover选择器和transform属性，transform可以将元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜，即当在鼠标移到链接/图片上时可以该元素添加的一些特殊样式，比如移动到超链接时，超链接会变色，所以要实现图片悬停的效果。
2.我们先来看看只用transform属性去实现一个倾斜的Hello World框
代码:
<style> div { margin:30px; width:200px; height:100px; background-color:aqua; transform:rotate(9deg); //兼容以下浏览器 //9deg的意思是倾斜9度 -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> 复制代码
3.再来看看只用hover选择器实现鼠标移动到超链接上时，超链接会相应的变色效果
代码:
<style> a:hover { background-color:aqua; } </style> </head> <body> <a href="http://www.baidu.com/">这是一个超链接的hover选择器效果</a> </body> 复制代码
4.最后是hover选择器和transform属性的结合，也就是文中要实现的悬停效果
代码：
* { margin:0; padding:0; list-style:none; } body { background:#1F1F1F; } .img { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("https://p26-passport.byteacctimg.com/img/user-avatar/2a8d6ccfbc571fc588cf3c40657b0986~300x300.image") left top; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -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; } .img:hover { //360度旋转 当鼠标移动到图片上时会有一个360度旋转的效果 -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } 复制代码
三.遇到的问题&解决办法
之前没有考虑到CSS3的一些属性Google浏览器和火狐浏览器是不支持的，怎么写运行了都不对，还是后面突然记起来兼容性这个问题，加上浏览器兼容就行了
结束语
确实很长时间没有去写前端的js，css代码了，一些东西比如样式的调整和浏览器兼容性问题都忘记了，有时间还恶补一下比较好。
