zoukankan      html  css  js  c++  java
  • 仿网易nec首页动画效果

    仿网页nec首页动画效果
    nec链接:http://nec.netease.com/

    首先,介绍animation
    animation检索或设置对象所应用的动画特效。
    animation由“keyframes”这个属性来实现这样的效果。
    keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。

    关于animation属性介绍:
    animation-name:检索或设置对象所应用的动画名称
    animation-duration:检索或设置对象动画的持续时间
    animation-timing-function:检索或设置对象动画的过渡类型
    animation-delay:检索或设置对象动画延迟的时间
    animation-iteration-count:检索或设置对象动画的循环次数
    animation-direction:检索或设置对象动画在循环中是否反向运动
    animation-play-state:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式

    nec动画实现原理:
    采用三层背景层、气泡层、文字镂空层。气泡层通过animation属性实现了运动效果。


    html结构:

    <div class="kbanner">
        <div class="knecbg knecone"></div>
        <div class="knecbg knectwo">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div class="knecbg knecthree"></div>
    </div>


    css样式:

    .kbanner{
        position: relative;
        width: 856px;
        height: 366px;
        background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_banner1.jpg) center top no-repeat;
    }
    .knecbg{
        position: absolute;
        left: 150px;
        top: 77px;
        width: 487px;
        height: 186px;
        overflow: hidden;
    }
    .knecone{
        background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left top no-repeat;
        z-index: 1;
    }
    .knectwo{
        z-index: 2;
    }
    .knecthree{
        background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left bottom no-repeat;
        z-index: 3;
    }
    .knectwo i{
        position: absolute;
        display: block;
        top: -50px;
        width: 53px;
        height: 56px;
        overflow: hidden;
        background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) no-repeat -9999px -9999px;
        -webkit-animation: paoi 7s 2s infinite;
        -moz-animation: paoi 7s 2s infinite;
        -ms-animation: paoi 7s 2s infinite;
        animation: paoi 7s 2s infinite;
    }
    .knectwo i:nth-child(1){
        left: 25px;
        -webkit-animation-delay: 3s;
        -moz-animation-delay: 3s;
        -ms-animation-delay: 3s;
        animation-delay: 3s;
        background-position: -507px 0;
    }
    .knectwo i:nth-child(2){
        left: 85px;
        -webkit-animation-delay: 6s;
        -moz-animation-delay: 6s;
        -ms-animation-delay: 6s;
        animation-delay: 6s;
        background-position: -507px -64px;
    }
    .knectwo i:nth-child(3){
        left: 190px;
        -webkit-animation-delay: 4s;
        -moz-animation-delay: 4s;
        -ms-animation-delay: 4s;
        animation-delay: 4s;
        background-position: -507px -140px;
    }
    .knectwo i:nth-child(4){
        left: 285px;
        -webkit-animation-delay: 8s;
        -moz-animation-delay: 8s;
        -ms-animation-delay: 8s;
        animation-delay: 8s;
        background-position: -507px 0;
    }
    .knectwo i:nth-child(5){
        left: 400px;
        -webkit-animation-delay: 5s;
        -moz-animation-delay: 5s;
        -ms-animation-delay: 5s;
        animation-delay: 5s;
        background-position: -507px 0;
    }
    @-webkit-keyframes paoi {
        0% {
        top:186px;
    }
    100% {
        top:-56px;
    }
    }@-moz-keyframes paoi {
        0% {
        top:186px;
    }
    100% {
        top:-56px;
    }
    }@-ms-keyframes paoi {
        0% {
        top:186px;
    }
    100% {
        top:-56px;
    }
    }@keyframes paoi {
        0% {
        top:186px;
    }
    100% {
        top:-56px;
    }



    nec动画效果:

  • 相关阅读:
    XNA入门教程(一)
    SQL透视表
    java 远程ftp建立文件夹
    费事数列——我的理解
    OOP
    OOP2
    河内之塔
    获取页面上TextBox并改变它的值
    RMAN学习之三:归档模式有备份,丢失控制文件。
    SQL Server Error: [DBNETLIB][ConnectionOpen (Connect()).]SQL Server 不存在或访问
  • 原文地址:https://www.cnblogs.com/kuikui/p/3139451.html
Copyright © 2011-2022 走看看