动画属性(animation)实战之滚动条的实现

主要还是要直到线性渐变怎么写,其他的都是些套路

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 980px;
            height: 60px;
            background-color: #000000;
            margin: 100px auto;
            background-image: linear-gradient(135deg, red 25%, blue 25%, blue 50%, red 50%, red 75%, blue 75%);
            background-size: 100px 100px;
            animation: move 1s linear infinite;
            border-radius: 10px;
        }
        @keyframes move {
            from{
                background-position: 0px;
            }
            to{
                background-position: 400px;
            }
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

动画属性(animation)实战之滚动条的实现

动画属性(animation)实战之滚动条的实现动画属性(animation)实战之滚动条的实现 九层之台 始于垒土 发布了44 篇原创文章 · 获赞 3 · 访问量 830 私信 关注
上一篇:scss @mixin用法,画一个彩色圆点,vue filter 过滤颜色


下一篇:学习jQuery的第一天