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>
    

      

     
  • 相关阅读:
    C++总结
    KMP算法
    理解I/O Completion Port(完成端口)
    [转载]Windows网络编程系列教程之四:Select模型
    [转载]理解 I/O Completion Port (IOCP完成端口)
    [转载]IOCP模型的总结
    发个IOCP的C++例子
    说说网络通信模型
    几个网络模型的示例代码(BlockingModel、OverlappedModel、WSAEventSelect、CompletionRoutine)..c++
    关于Socket 多线程 的一篇好文章
  • 原文地址:https://www.cnblogs.com/wshr210/p/11289444.html
Copyright © 2011-2022 走看看