<!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>
转载请注明原文地址: https://www.6miu.com/read-82745.html
