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 

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证

CSS3实战开发:手把手教你鼠标滑动特效开发,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。