zoukankan      html  css  js  c++  java
  • 纯CSS3制作进度条源代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3 动态进度条</title>
        <style>
            .progress {
                 500px;
                height: 40px;
                margin: 100px auto;
                background-color: yellow;
                border-radius: 5px;
                background-image: linear-gradient(
                    135deg,
                    green 25%,
                    transparent 25%,
                    transparent 50%,
                    green 50%,
                    green 75%,
                    transparent 75%,
                    transparent 100%
                );
                background-size: 40px 40px;

                background-position: 0 0;

                animation: move 1s linear infinite;
            }
            
            /*动画序列*/
            @keyframes move {
                0% {
                    background-position: 0 0;
                }

                100% {
                    background-position: 40px 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="progress"></div>
    </body>
    </html>

  • 相关阅读:
    windows下python开发环境搭建
    看看两年前的我
    网络函数[00]函数总述
    网络函数[04]connect解析
    网络函数[08]网络读取函数解析
    网络函数[01]套接口地址图解
    网络函数[13]
    网络函数[07]accept解析
    网络函数[10]shutdown解析
    网络函数[14]
  • 原文地址:https://www.cnblogs.com/hbqfr/p/6040059.html
Copyright © 2011-2022 走看看