c3动画斑马线

最新推荐文章于 2021-10-13 11:52:22 发布

web加加

最新推荐文章于 2021-10-13 11:52:22 发布

阅读量274

点赞数

分类专栏： html5+css3

html5+css3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 1000px;
            height: 100px;
            margin:30px auto;
            border: 1px solid #000;
        }
        /* 语法：
            linear-gradient(方向，起始颜色，终止颜色);
            方向：to left   to right  to top   to bottom 　角度　30deg
            起始颜色
            终止颜色
        */


        div{
            background-image: linear-gradient(135deg,
                #000 0%,
                #000 25%,
                #fff 25%,
                #fff 50%,
                #000 50%,
                #000 75%,
                #fff 75%,
                #fff 100%
            );

            /*background-repeat: no-repeat;*/
            background-size:100px 100%;

            animation: gun 1s infinite linear;
        }

        @keyframes gun {
            0%{

            }

            100%{
                background-position: 100px 0px;
            }
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>