善于使用CSS3渐变transition，实现炫酷过度效果

很多朋友问网页上鼠标移上去以后的过渡效果怎么实现的，以往没有css3我们通常使用jquery的animate实现，现在有了css3确实方便了很多，一个transition即可实现。

比如下面这个div，我们实现一个鼠标yi's移上去以后背景色和圆角的过渡变化。

<div id="myTest">
        如沐春风
    </div>

现在我们首先设置一下divrong容器的样式属性

#myTest{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #f43838;
            margin: auto;
            margin-top: 100px;
            transition:all 0.5s;
            color: #FFF;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
        }

注意上面的transition这个属性，我们设置了两个参数，第一个是all，表示所有的css样式参与过渡动画。如果只希望背景色参与，那么需要把all改成background-color。

接下来设置一下鼠标以上以后的样式就可以了

#myTest:hover{
            background-color: #468847;
            border-radius: 50px;
        }

好了，现在鼠标以上div以后就可以看到渐变效果了，非常简单实用。

查看源码和演示