css3 的渐变分为线性渐变和径向渐变
css3 的渐变分为线性渐变和径向渐变：
<style>
* {
margin: 0;
padding: 0;
font-size: 0.16rem;
}
//线性渐变： #jb {
width: 500px;
height: 200px;
/*线性渐变*/
background-image: linear-gradient(red, yellow);
}
#jb1 {
width: 500px;
height: 200px;
/*方向线性渐变*/
background-image: linear-gradient(to top right, red, yellow);
}
#jb2 {
width: 500px;
height: 200px;
/*角度线性渐变*/
background-image: linear-gradient(45deg, red, yellow);
}
#jb3 {
width: 500px;
height: 200px;
/*多种颜色等比例渐变*/
background-image: linear-gradient(to bottom right, red 0%, yellow 30%, orange 60%, green 100%);
}
//径向渐变 ： #jb4 {
width: 500px;
height: 200px;
/*两种颜色径向渐变*/
background-image: radial-gradient(green, blue);
}
#jb5 {
width: 500px;
height: 200px;
/*椭圆径向渐变*/
background-image: radial-gradient(ellipse, red, yellow);
}
#jb6 {
width: 500px;
height: 200px;
/*圆形可设置大小的径向渐变*/
background-image: radial-gradient(circle 100px, #000, #ff0000);
}
#jb7 {
width: 500px;
height: 200px;
/*重复的径向渐变*/
background-image: repeating-radial-gradient(circle 50px, #000, #ff0000);
}
/* 文字渐变 */
.text-gradient {
display: inline-block;
font-family: '微软雅黑';
font-size: 0.16rem;
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>
<h2>线性渐变</h2>
<div id="jb">
线性渐变
</div>
<div id="jb1">
方向线性渐变
</div>
<div id="jb2">
角度线性渐变
</div>
<div id="jb3">
多种颜色等比例渐变
</div>
<h2>径向渐变</h2>
<div id="jb4">
两种颜色径向渐变
</div>
<div id="jb5">
椭圆径向渐变
</div>
<div id="jb6">
圆形可设置大小的径向渐变
</div>
<div id="jb7">
重复的径向渐变
</div>
<h3 class="text-gradient" data-text="文字渐变">文字渐变</h3>
</body>
<script>
//重复的径向渐变通过添加定时器设置
var jb = document.getElementById("dd7");
var sz = 50;
setInterval(function () {
sz+= 5;
if (sz >= 100) {
sz = 50;
}
jb.style.backgroundImage = 'repeating-radial-gradient(circle ' + sz + 'px,red,yellow)';
}, 200);
</script>
