zoukankan      html  css  js  c++  java
  • CSS3小方块跳动

    方块跳动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>跳动</title>
        <style>
            .box:before {
                content: '';
                position: absolute;
                z-index: 2;
                top: 60px;
                left: 50px;
                 50px;
                height: 50px;
                background: #c00;
                border-radius: 2px;
                transform: rotate(45deg);
                -webkit-animation: box .8s infinite;
            }
    
            @-webkit-keyframes box {
                0% {
                    top: 50px;
                    transform: rotate(90deg);
                }
                20% {
                    border-radius: 2px; /*从20%的地方才开始变形*/
                }
                50% {
                    top: 80px;
                    transform: rotate(45deg);
                    border-bottom-right-radius: 25px;
                }
                80% {
                    border-radius: 2px; /*到80%的地方恢复原状*/
                }
                100% {
                    top: 50px;
                    transform: rotate(0deg);
                }
            }
    
            .box:after {
                content: '';
                position: absolute;
                z-index: 1;
                top: 128px;
                left: 52px;
                 44px;
                height: 3px;
                background: #eaeaea;
                border-radius: 100%;
                -webkit-animation: shadow .8s infinite;
            }
    
            @-webkit-keyframes shadow {
                0%, 100% {
                    left: 54px;
                     40px;
                    background: #eaeaea;
                }
                50% {
                    top: 126px;
                    left: 50px; /*让阴影保持在原位*/
                     50px;
                    height: 7px;
                    background: #eee;
                }
            }
    
    
        </style>
    </head>
    <body>
    
        <div class="box"></div>
    
    </body>
    </html>
    

      

     
  • 相关阅读:
    NYOJ 625 笨蛋的难题(二)
    NYOJ 102 次方求模
    ZJU Least Common Multiple
    ZJUOJ 1073 Round and Round We Go
    NYOJ 709 异形卵
    HDU 1279 验证角谷猜想
    BNUOJ 1015 信息战(一)——加密程序
    HDU 1202 The calculation of GPA
    "蓝桥杯“基础练习:字母图形
    "蓝桥杯“基础练习:数列特征
  • 原文地址:https://www.cnblogs.com/wshr210/p/11289444.html
Copyright © 2011-2022 走看看