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>
  • 相关阅读:
    《移动WEB前端高级开发实践@www.java1234.com.pdf》【2】
    《生鲜零售智能化之路》
    房屋布局分析《Physics Inspired Optimization on Semantic Transfer Features: An Alternative Method for Room Layout Estimation》
    《2018:skymind.ai 发布了一份非常全面的开源数据集》
    Flask/Tornado/Django
    《特征提取与图像处理》
    《icra16_slam_tutorial_tardos.pdf》
    《3D_Deep_Learning_for_Robot_Perception.pdf》
    《深度访谈:华为开源数据格式 CarbonData 项目,实现大数据即席查询秒级响应》
    数据库性能测试
  • 原文地址:https://www.cnblogs.com/kukai/p/12321564.html
Copyright © 2011-2022 走看看