zoukankan      html  css  js  c++  java
  • 彩色动态球

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .outer{
                height: 300px;
                border-bottom: 10px solid black;
                margin: 0 auto;
                overflow: hidden;
            }
            .outer div{
                 50px;
                height: 50px;
                border-radius: 50%;
                animation:boll .5s forwards ease-in infinite alternate;
                float:left;
            }
            .outer .box2{
                background-color: red;
            }
            .outer .box3{
                background-color: orange;
                /* 设置延时 */
                animation-delay: 0.1s;
            }
            .outer .box4{
                background-color: yellow;
                animation-delay: 0.2s;
            }
            .outer .box5{
                background-color:green;
                animation-delay: 0.3s;
            }.outer .box6{
                background-color:blue;
                animation-delay: 0.4s;
            }
            .outer .box7{
                background-color: indigo;
                animation-delay: 0.5s;
            }
            @keyframes boll {
                from{
                    margin-top: 0px;
                }
                to{
                    animation-timing-function: ease-in;
                    margin-top: 250px;
                }
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
            <div class="box5"></div>
            <div class="box6"></div>
            <div class="box7"></div>
            <div class="box8"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    org.springframework.context.event.AbstractApplicationEventMulticaster
    40. Testing Prev Part IV. Spring Boot features
    nginx+redis 实现 jsp页面缓存,提升系统吞吐率
    SpringDataRedis事务 专题
    cat监控平台环境搭建 专题
    Archive for required library: ‘WebContent/WEB-INF/lib/xxx.jar cannot&n
    m2eclipse简单使用,创建Maven项目 ,运行mvn命令
    如何修改maven默认仓库(即repository)的路径
    MyEclipse2014不支持jre1.8吗
    MyEclipse 2015优化技巧
  • 原文地址:https://www.cnblogs.com/kukai/p/12321564.html
Copyright © 2011-2022 走看看