IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

CSS3实战开发:手把手教你鼠标滑动特效开发

作者:陌上花会开  发布日期:2014-08-19 20:36:52
  • 收藏本文    我要投稿
  • 各位网友,如果你已经看过我的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>标签里的背景色,不信就去试试吧!

     

Tag标签:实战  特效  鼠标  
  • 专题推荐