各位网友，如果你已经看过我的CSS3实战开发系列教程，我相信你对CSS3已经有了非常全面深刻的了解。有些人可能CSS3语法掌握了不少，但是真正实际用起来还有点生疏，甚至无从下手。请别担心，我会不断更新一系列实战开发案例，我会为大家分步骤剖析特效开发过程。
今天我将手把手带领大家开发一个鼠标滑动的特效案例，废话不多说，直接上效果动画：
你有没有觉得上面的这个特效很棒呢!
好，现在咱们就开始分步骤实战开发这个动画特效吧：
首先，我们先准备好html页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>CSS3实战开发:鼠标滑动特效实战开发</title>
</head>
<body>
<div class="container">
<div class="hot_navs">
<div class="hot_title">热门网址</div>
<div class="hot_area">
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/101.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/102.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/103.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/104.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/105.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/106.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/107.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/108.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/109.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/110.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/111.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/112.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/113.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/114.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/115.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/116.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/117.png" />
</a>
<a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">
<i></i>
<img src="imgs/118.png" />
</a>
</div>
</div>
</div>
</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;
}
好了，现在我们来看看此时的页面效果：
好了，至此今天的实战代码已经开发完了。如果你想使用不用的颜色，只需要修改<i></i>标签里的背景色，不信就去试试吧！
往期精彩实战开发案例一览(已被广为转载，下面只列出部分)：
1. 《CSS3实战开发：手把手教大家搜索表单发光特效实战开发》
2. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》
4. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》
6. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》
7. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证
相关推荐
本书英文版书名《Practical CSS3：Developand Design》，作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程，是W3C网络教育社区组的联职主席。贯穿本书的一...
在本案例中，我们将深入探讨如何使用CSS3创建一个引人入胜的“小怪物吃鼠标”特效。CSS3作为现代网页设计的核心技术之一，提供了丰富的样式和动画功能，让我们可以构建出更具交互性和视觉吸引力的网页元素。下面，...
在本文中，我们将深入探讨如何使用纯CSS3技术来创建一个鼠标滑动开关灯的特效。这个效果在网页设计中非常常见，可以用于模拟实际生活中的开关操作，为用户提供直观的交互体验。CSS3（层叠样式表第三版）是CSS的最新...
本资源“css3的鼠标悬停按钮滑动切换动画特效.zip”包含了一系列利用CSS3的transition（过渡）属性实现的鼠标悬停按钮动画特效，这些特效在用户将鼠标指针悬停在按钮上时会触发，使得交互体验更加生动和吸引人。...
【CSS3滑动开关按钮特效】是一种常见的UI设计元素，常用于开启或关闭某个功能，如设置中的开关选项。在本实例中，我们利用CSS3的强大功能，无需JavaScript即可实现这一效果，使得代码更加简洁且易于维护。 首先，...
本教程将介绍如何利用JavaScript和CSS3技术在鼠标悬停超链接时展示图片特效，为用户提供更为丰富的视觉体验。这款特效包含10种不同的动画效果，使得超链接在被鼠标指针悬停时更加生动有趣。 首先，我们讨论CSS3在...
在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一款圆形布局的卡牌滑动切换特效。这个特效适用于各种项目，例如展示产品、图片库或者动态内容展示，通过点击卡牌实现平滑的切换效果，给用户带来独特的交互体验...
【CSS3鼠标hover悬停动画特效】是一种利用CSS3特性实现的交互效果，当鼠标指针悬停在某个元素上时，该元素会呈现出预先设定的动态变化。这些动画不仅提升了用户体验，还使网站或应用更具吸引力。在这个压缩包中包含...
本文将详细讲解如何利用CSS3实现滑动图像面板的图片切换特效，以及多种不同的CSS3图片切换演示。同时，我们也会探讨与JQuery库的结合，以增强这种动态效果。 首先，CSS3中的关键帧动画（@keyframes）是创建滑动图像...
本项目“css3鼠标悬停高亮滑动显示文字信息代码”就是利用这些特性来实现一种独特的企业项目服务说明展示特效。这个特效在用户将鼠标悬停在特定元素上时，会高亮显示该元素，并滑动展示相关的文字信息，增加了用户的...
在探讨“HTML：鼠标滑动效果”这一主题时，我们主要关注的是如何通过HTML、CSS以及JavaScript技术，来实现网页上鼠标光标的动态变化，尤其是当鼠标悬停或滑过特定元素时，光标能够展现出诸如手型、指针等不同形态的...
- `index.jpg`：这可能是用于测试鼠标点击滑动特效的背景图片，通过修改HTML代码中的src属性，可以替换为其他图片实现相同效果。 - `懒人图库.url`：这可能是一个快捷方式链接，指向一个图库网站，可能供开发者寻找...
在本案例中，我们讨论的是一个利用CSS3实现的“悬停图片滑动遮罩层文字提示特效”。 这个特效通常应用于图片展示区域，当鼠标悬停在图片上时，会出现一个半透明的遮罩层，并在该层上滑动显示相关的文字提示信息。...
CSS3的过渡和动画效果则为网页增加了动态视觉体验，如滑动、淡入淡出等。 在这个微课版的教程中，你将有机会接触到以下关键知识点： 1. HTML5的新特性：学习如何使用HTML5新元素、API以及多媒体支持。 2. CSS3布局...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标悬停特效。"数十次css3鼠标悬停特效"这个主题聚焦于利用CSS3技术来实现多样化的鼠标悬停效果，使得用户在网页上的...
本资源“css3鼠标滑动按钮动画效果.zip”正聚焦于这一特性，旨在帮助开发者实现鼠标滑过按钮时的动态效果，提升用户体验。这个压缩包包含了一个实用的代码示例，可用于创建具有吸引力的网页交互元素。 CSS3的过渡...
"DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果，它通过改变鼠标悬停在元素上时的背景图像位置，创造出一种类似门开启或关闭的动画效果。 具体来说，滑动门效果主要基于以下CSS属性： 1. **...
2. 动画效果：可以结合CSS3的`transition`属性，添加平滑过渡动画，使滑动门开启和关闭更加自然。 3. 多种效果组合：滑动门效果不仅可以用于背景颜色和图像的切换，还可以与其他CSS特效结合，如渐变、阴影、边框等...
这是一款CSS3图片说明滑动特效：从底部弹出说明框，阴影覆盖图片，旋转弹出说明背景框等形式。 建议大家可以用跨平台开发工具：统一开发环境（UDE）来调试、查看。。。 统一开发环境是一款HTML5跨平台一站式应用开发...
在“html5+css3圆角图文展示卡片层叠滑动切换特效.zip”这个压缩包中，我们可以看到一个利用这两种技术实现的动态展示卡片的特效。这种特效通常用于产品展示、信息分类或者新闻滚动等场景，可以吸引用户注意力，提高...