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

最新推荐文章于 2023-11-08 15:16:52 发布

杏黄的三叶草

最新推荐文章于 2023-11-08 15:16:52 发布

阅读量528

点赞数

分类专栏： Web实战

本文链接：https://blog.csdn.net/dwjdj/article/details/104116963

版权

Web实战专栏收录该内容

5 篇文章 6 订阅

订阅专栏

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

<!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>