linear-gradient(90deg,red 10%,yellow 20%,green 30%)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
600px;
height: 200px;
border: 1px solid;
margin: 0 auto;
/*background-image:linear-gradient(90deg,red 100px,yellow 110px) ;*/
background-image:linear-gradient(90deg,rgba(0,0,0,1) 100px,rgba(0,0,0,1) 300px) ;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
发廊灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
40px;
height: 300px;
border: 1px solid;
margin: 100px auto;
overflow: hidden;
}
#wrap > .inner{
height: 600px;
background:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript">
var inner = document.querySelector("#wrap > .inner");
var flag =0;
setInterval(function(){
flag++;
if(flag==300){
flag=0;
}
inner.style.marginTop = -flag+"px";
},1000/60)
</script>
</html>
光斑动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background: black;
text-align: center;
}
h1{
/*transition: 3s;*/
margin-top: 50px;
display: inline-block;
color: rgba(255, 255, 255,.3);
font:bold 80px "微软雅黑";
background: linear-gradient(120deg,rgba(255,255,255,0) 100px ,rgba(255,255,255,1) 180px ,rgba(255,255,255,0) 260px);
background-repeat:no-repeat ;
-webkit-background-clip: text ;
}
/*h1:hover{
background-position: 500px 0;
}*/
</style>
</head>
<body>
<h1>atguigu尚硅谷</h1>
</body>
<script type="text/javascript">
var h1 = document.querySelector("h1");
var flag =-160;
setInterval(function(){
flag+=10;
if(flag==600){
flag=-160;
}
h1.style.backgroundPosition = flag+"px";
},30)
</script>
</html>
径向渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image:radial-gradient( closest-corner circle at 20px 20px,yellow, green 50%,pink) ;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>