css渐变动画

一、效果图
二、实现方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        body {
            background: #ccc;
        }
        .box {
            width: 300px;
            height: 8px;
            background: #17467f;
            border-radius: 4px;
        }
        .animation {
            height: 100%;
　　　　　　　// 背景色渐变
            background: linear-gradient(to right, rgba(14, 46, 95, 0) 33%, rgba(86, 239, 222, 0.27) 66%, rgba(0, 222, 255, 1) 100%);
            animation: mymove 3s infinite;
            border-radius: 4px;
        }
　　　　　　// div宽度从0到40%--自身长度伸缩; margin-left从0到60%--div位置的改变。

        @keyframes mymove {
            from {
                width: 0;
                margin-left: 0;
            }
            to {
                width: 40%;
                margin-left: 60%;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="animation"></div>
    </div>
</body>
</html>
致力于前端技术学习与分享，会及时更新博客。