<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>線性漸變和徑向漸變</title>
<style type="text/css">
#dd{
width: 500px;
height: 200px;
/*線性漸變*/
background-image: linear-gradient(red,yellow);
}
#dd1{
width: 500px;
height: 200px;
/*方向線性漸變*/
background-image: linear-gradient(to top right,red,yellow);
}
#dd2{
width: 500px;
height: 200px;
/*角度線性漸變*/
background-image: linear-gradient(45deg,red,yellow);
}
#dd3{
width: 500px;
height: 200px;
/*多種顏色等比例漸變*/
background-image: linear-gradient(to bottom right,red 0%,yellow 30%, orange 60%,green 100%);
}
#dd4{
width: 500px;
height: 200px;
/*徑向漸變*/
background-image: radial-gradient(green,blue);
}
#dd5{
width: 500px;
height: 200px;
/*橢圓徑向漸變*/
background-image: radial-gradient(ellipse,red,yellow);
}
#dd6{
width: 500px;
height: 200px;
/*圓形可設置大小的徑向漸變*/
background-image: radial-gradient(circle 100px,#000,#ff0000);
}
#dd7{
width: 500px;
height: 200px;
/*重復的徑向漸變*/
background-image:repeating-radial-gradient(circle 50px,#000,#ff0000);
}
/* 文字漸變 */
.text-gradient {
display: inline-block;
font-family: '微軟雅黑';
font-size: 10em;
position: relative;
}
.text-gradient[data-text]::after {
content: attr(data-text);
color: #FBEE00;
position: absolute;
left: 0;
z-index: 2;
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FBEE00), to(rgba(251,246,147,.6)));
}
</style>
</head>
<body>
<h1>線性漸變</h1>
<div id="dd">
線性漸變
</div>
<div id="dd1">
方向線性漸變
</div>
<div id="dd2">
角度線性漸變
</div>
<div id="dd3">
多種顏色等比例漸變
</div>
<h1>徑向漸變</h1>
<div id="dd4">
兩種顏色徑向漸變
</div>
<div id="dd5">
橢圓徑向漸變
</div>
<div id="dd6">
圓形可設置大小的徑向漸變
</div>
<div id="dd7">
重復的徑向漸變
</div>
<h2 class="text-gradient" data-text="文字漸變">文字漸變</h2>
</body>
</html>
<script>
var dd = document.getElementById("dd7");
var xd = 50;
setInterval(function(){
xd+=5;
if(xd>=100){
xd=50;
}
dd.style.backgroundImage='repeating-radial-gradient(circle '+xd+'px,red,yellow)';
},100);
</script>
