纯CSS3制作进度条源代码

2022-10-19 20:19:55

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS3 动态进度条</title>
   <style>
       .progress {
           width: 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>

码农公寓

相关文章