（7）渐变
渐变是一张图片，而不是颜色
① 线性渐变
示例： 控制颜色节点的分布
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
width: 600px;
height: 200px;
border: 1px solid;
margin: 0 auto;
/* background-image: linear-gradient(red 10%,yellow 20%,green 30%); */
background-image: linear-gradient(to right,red 100px,yellow 200px,green 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;
}
#test{
width: 600px;
height: 200px;
border: 1px solid;
margin: 0 auto;
background-image: linear-gradient(90deg,rgba(0,0,0,0) 100px,rgba(167,178,222,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;
}
#test{
width: 600px;
height: 200px;
border: 1px solid;
margin: 0 auto;
background-image: repeating-linear-gradient(90deg,rgba(0,0,0,0),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{
width: 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{
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;
}
</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{
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image: radial-gradient( closest-corner circle at 200px 200px,yellow,deeppink 50%,pink);
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
效果
六、过渡
1.过渡
（1）transition-property
（2）transition-duration
（3）transition-timing-function
（4）transition-delay
（5）当属性值的列表长度不一致时
（6）检测过渡是否完成
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width,height;
transition-duration: 2s;
transition-timing-function: linear;
}
body:hover #test{
width: 300px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var testNode = document.querySelector("#test");
var bodyNode = document.querySelector("body");
// dom0事件
bodyNode.onmouseover=function(){
testNode.style.width="300px";
testNode.style.height="300px";
setTimeout(function(){
testNode.style.display="none";
},3000)
}
// dom2
testNode.addEventListener("transitionend",function(){
alert("over");
})
}
</script>
</html>
2.过渡天坑
transition在元素首次渲染还没有结束的情况下是不会被触发的
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
body:hover #test{
transition-property: height;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
// window.οnlοad=function(){
setTimeout(function(){
var test = document.querySelector("#test");
test.style.width="300px";
},3000)
// }
</script>
</html>
示例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var test = document.createElement("div");
test.id="test";
document.documentElement.appendChild(test);
setTimeout(function(){
test.style.width="300px";
},2000)
}
</script>
</html>
3.过渡的简写属性
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition: 2s 3s width,3s height;
}
body:hover #test{
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<div id="test">
派大星
</div>
</body>
</html>