zoukankan      html  css  js  c++  java
  • css动画轮播播放

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    }
    ul li{
    list-style: none;
    }

    .baner-box{
    position: relative;
    400px;
    height: 200px;
    overflow: hidden;
    }
    .banner{
    1600px;
    position: absolute;
    left:0;
    animation-name: bannerMove;
    animation-duration: 8s;
    animation-iteration-count: infinite;

    }
    @keyframes bannerMove {
    0%,30%{
    left: 0;
    }
    35%,65%{
    left: -400px;
    }
    70%,99%{
    left: -800px;
    }
    100%{
    left: -1200px;
    }

    }
    .banner li{
    float: left;
    400px;
    height: 200px;
    }
    </style>
    </head>
    <body>
    <div class="baner-box">
    <ul class="banner">
    <li style="background-color:#f90;"></li>
    <li style="background-color:#f00;"></li>
    <li style="background-color:#9f0;"></li>
    <li style="background-color:#333;"></li>
    </ul>

    </div>
    </body>
    </html>

  • 相关阅读:
    mysql总结
    ContOS7 安装 java1.8
    查找
    排序
    线程通信(交替执行)
    死锁(实现)
    Rank Scores
    OpenMP
    聚类的数据量过大的问题
    编译GraphLab出错
  • 原文地址:https://www.cnblogs.com/gg123/p/7108430.html
Copyright © 2011-2022 走看看