CSS3实现鼠标滑过Hover悬停特效

1、新建html文档。

2、书写hmtl代码。

<div id="effects">

<h2>2D Transforms</h2>

<a rel="grow" class="button grow">Grow</a>

<a rel="shrink" class="button shrink">Shrink</a>

</div>

3、初始化css代码。

<style>

body { margin: 0 auto; max-width: 800px; padding: 20px; font-family: sans-serif; color: #333; line-height: 140%; }

img { border: none; }

.aligncenter { text-align: center; }

.tutorial { display: block; font-size: .8em; }

.tutorial:hover { text-decoration: none; }

.intro { max-width: 680px; margin: 0 auto; }

.button.cta { display: inline-block; position: relative; margin: 2em 0 1em 0; padding: 1em; background: #2098D1; border: none; text-decoration: none; font-weight: 700; color: white; }

#effects { margin-top: 5em; }

h1 { text-align: center; font-size: 4em; }

h2 { margin-top: 2em; }

</style>

4、书写css代码。

<style>

.grow { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.grow:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.shrink { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.shrink:hover { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }

</style>

5、代码整体结构。

6、查看效果。动画效果需要鼠标放上去才看得到效果。