首先，我们先准备好html页面代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>CSS3实战开发:鼠标滑动特效实战开发</title>
</head>
<body>
<p class="container">
<p class="hot_navs">
<p class="hot_title">热门网址</p>
<p class="hot_area">
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/101.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/102.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/103.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/104.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/105.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/106.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/107.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/108.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/109.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/110.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/111.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/112.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/113.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/114.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/115.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/116.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/117.png" />
</a>
<a class="hot_items" href="https://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/118.png" />
</a>
</p>
</p>
</p>
</body>
</html>
复制代码
为了使页面呈现一个好的布局，我设置外面边框以及固定了热门网址的宽度，CSS样式代码如下：
复制代码
*{
margin:0;
padding:0;
}
.container{
margin:200px auto;
width:1024px;
}
.hot_navs{
border:1px solid #CCCCCC;
width:800px;
}
.hot_navs .hot_title{
margin:1em .5em;
border-bottom:1px dotted #CCCCCC;
}
复制代码
此时我们看一下页面效果：
大家会发现，此时页面中有一些黑色的下划线，这个是由a标签引起的，所以我们现在给a标签设置样式：
复制代码
.hot_navs a{
text-decoration:none;
display:inline-block;
height:70px;
line-height:70px;
position:relative;
}
复制代码
由于我们有一个动画效果背景(开头动画的橙色效果)，所以我们将a标签的位置设置为position:relative.
此时的效果如下：
我们想实现一个，当鼠标划过时，动画由0.8倍逐渐放大到1倍，且动画不透明度从0到0.6，我们先定义动画帧：
复制代码
@-webkit-keyframes hotnavIn {
0% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0;
}
100% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
}
@-moz-keyframes hotnavIn {
0% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0;
}
100% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
}
@-ms-keyframes hotnavIn {
0% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0;
}
100% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
}
@keyframes hotnavIn {
0% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0;
}
100% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
}
@-webkit-keyframes hotnavOut {
0% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
100% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0
}
}
@-moz-keyframes hotnavOut {
0% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
100% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0;
}
}
@-ms-keyframes hotnavOut {
0% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
100% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0;
}
}
@keyframes hotnavOut {
0% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:0.6;
}
100% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
opacity:0;
}}
复制代码
动画帧定义好之后，我们就可以给页面添加动画效果了，如果你够细心，就会发现html页面中每个a标签下都有一个<i></i>标签。不错，它是实现我们今天动画效果的主角。现在我们给<i></i>标签添加样式代码：
复制代码
.hot_navs .hot_items i{
width:100%;
height:100%;
background-color:#FFB200;
position:absolute;
opacity:0;
-webkit-animation:hotnavOut 0.4s ease;
-moz-animation:hotnavOut 0.4s ease;
-ms-animation:hotnavOut 0.4s ease;
animation:hotnavOut 0.4s ease;
}
.hot_navs .hot_items:hover i{
opacity:0.6;
-webkit-animation:hotnavIn 0.2s ease;
-moz-animation:hotnavIn 0.2s ease;
-ms-animation:hotnavIn 0.2s ease;
animation:hotnavIn 0.2s ease;
