“我正在参加码上掘金体验活动，详情：show出你的创意代码块”

前言

一直看着掘金主页点头像会加速旋转，自己也想写一个类似这种的特效，就是鼠标放图片上时图片会悬停，就是那种戳一下动一下的效果，本文会先分解实现的步骤，使用到知识点都会有案例，那么我们开始吧。

一.运行效果&在线体验地址

二.主要实现点解析

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代码了，一些东西比如样式的调整和浏览器兼容性问题都忘记了，有时间还恶补一下比较好。

创意代码之图片悬停效果