首页 > 代码库 > CSS3实战开发:手把手教你鼠标滑动特效开发
CSS3实战开发:手把手教你鼠标滑动特效开发
各位网友，如果你已经看过我的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界面设计》
3. 《CSS3线性渐变技术详解及超炫按钮实战开发》
4. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》
5. 《CSS3实战开发:手把手教你照片墙实战开发》
6. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》
7. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》
8. 《CSS3实战开发:手把手教大家折角效果实战开发》
欢迎大家加入互联网技术交流QQ群：62329335
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。