线性渐变
双颜色值的线性渐变
background-image:linear-gradient(red,blue);多颜色值的线性渐变
background-image:linear-gradient(red,blue,pink,black);改变渐变方向
background-image:linear-gradient(to top left,red,blue);使用角度
background-image:linear-gradient(0deg,red,blue);控制颜色节点的分布
background-image:linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 30%,blue 50%,indigo 70%,violet 80%);透明度的渐变
background-image:linear-gradient(90deg,rgba(255,0,0,0) 50%,rgba(255,0,0,0.5),rgba(255,0,0,1) 60%);重复渐变
background: repeating-linear-gradient(90deg,red 10%,blue 30%);渐变实例-发廊灯
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#warp{
height: 300px;
width: 40px;
border: 1px solid;
margin: 100px auto;
overflow: hidden;
}
#warp > .inner{
height: 600px;/*这是是颜色所在的高度。远比能看见的要高*/
background: repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
}
#warp:hover .inner{
margin-top: -300px;
}
</style>
</head>
<body>
<div id="warp">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript">
var inner = document.querySelector("#warp > .inner");/*获取元素*/
var flag = 0;/*循环结束后归零*/
setInterval(function(){
flag++;
if(flag == 300){
flag = 0;
}
inner.style.marginTop = -flag+"px";
},1000/60)/*设置定时器循环*/
</script>
</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的display: inline-block;属性让h1这个元素居中*/
}
h1{
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;
}
</style>
</head>
<body>
<h1>码酱博客-专注与总结分享</h1>
</body>
<script type="text/javascript">
var h1 = document.querySelector("h1");/*获取元素*/
var flag = -160;/*循环结束后归零*/
setInterval(function(){
flag+=10;
if(flag == 900){
flag = -160;
}
h1.style.backgroundPosition = flag+"px";
},30)/*设置定时器循环*/
</script>
</html>