4.动画加载效果_动漫加载效果-CSDN博客

本文链接：https://blog.csdn.net/qq_22533095/article/details/50517689

这个简单的动画加载是由中间向两边扩展的效果，比较简单。这部分内容是参看的W3CPLUS上的文章。

<body>
    <div class="box">
        <div id="nav">
            <a href="http://blog.linux.de/" title="林小志的个人工作学习博客日志">小志博客</a>-
            <a href="http://www.linuxz.de/my_flickr_photo.php">小志的照片</a>-
            <a href="http://blog.linuxz.de/css_book" title="林小志编写的第一本技术类书籍--《css那些事》">《css那些事》</a>-
            <a href="http://www.linxz.de/tianyizone/" title="添翼地带为你解决CSS布局网站在各个浏览器中的兼容问题，并提供各类模板下载，在CSS能实现的前提下，只有你想不到的，没有你要不到的页面！">添翼地带</a>-
            <a href="http://lab.linxz.de" title="林小志的个人代码demo测试列表页面">linxz's lab</a>-
            <a href="http://www.linxz.de/css_tool/" title="自制的几个关于CSS的小工具，比如图片垂直水平居中、背景透明文本不透明等">CSS小工具</a>-
            <a href="http://box.linxz.de/" title="乱写盒子，方便与他人交流xhtml+css问题">>乱写盒子</a>
        </div>
        <div class="linxz_copy">
            <a target="_blank" href="http://www.miibeian.gov.cn">浙ICP备<span style="font-family:Georgia;font-size:11px;">08014068</span>号</a>
        </div>
    </div>
</body>

设置一下整个界面，字体和背景颜色。

body{
    font-size: 12px;
    font-family: "microsoft Yahei",Simsun,Arial,"Lucida Grande",tahoma;
    margin: 0;
    background: #f8f8f8;
}

这里除了设置一些基本样式外，最关键的是过渡动画使用，当然面对IE你会想哭，原因你懂的。

.box{
    position: absolute;
    width: 100%;
    height: 70px;
    top: 39%;
}

a{
    color: #333;
    text-decoration: none;
    -moz-transition:color 500ms linear;
    -webkit-transition:color 500ms linear;
}

a:hover{
    color: #f00;
}

#nav a {
    color: #fff;
}

#nav a:hover {
    color: #a8ff00;
}

img{
    border: 0 none;
}

.linxz_copy {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    text-align: center;
}

自定义动画。

@-moz-keyframes my_nav{
    0% {
        width: 0%;
        opacity: 0;
        border-radius: 15px;
    }
    70% {
        width: 10%;
        -webkit-border-radius: 15px;
        border-radius: 15px;
    }
    80% {
        width: 40%;
    }
    90% {
        width: 70%;
    }
    100% {
        width: 100%;
        opacity: 1;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}

@-webkit-keyframes my_nav{
    0% {
        width: 0%;
        opacity: 0;
        border-radius: 15px;
    }
    70% {
        width: 10%;
        -webkit-border-radius: 15px;
        border-radius: 15px;
    }
    80% {
        width: 40%;
    }
    90% {
        width: 70%;
    }
    100% {
        width: 100%;
        opacity: 1;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}

@keyframes my_nav{
    0% {
        width: 0%;
        opacity: 0;
        border-radius: 15px;
    }
    70% {
        width: 10%;
        -webkit-border-radius: 15px;
        border-radius: 15px;
    }
    80% {
        width: 40%;
    }
    90% {
        width: 70%;
    }
    100% {
        width: 100%;
        opacity: 1;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}

调用动画

#nav{
    display: block;
    height: 30px;
    overflow: hidden;
    /*上0下10左右自适应*/
    margin: 0 auto 10px;
    line-height: 30px;
    text-align: center;
    background: #222;
    color: #fff;
    -moz-animation-name: my_nav;
    -moz-animation-duration: 500ms;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-name: my_nav;
    -webkit-animation-duration: 500ms;
    -webkit-animation-timing-function: ease-out;
    animation-name: my_nav;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
}