径向渐变radial-gradient(shape size at position, start-color, ... , end-color)
-
shape：确定圆的类型。默认为椭圆形ellipse，也可设置为圆形circle。可通过at指定起始点位置。 -
size：定义渐变的大小，指定径向渐变的半径长度。默认为farthest-corner从圆心到离圆心最远的角；closest-side从圆心到离圆心最近的边；farthest-side、closest-corner。 -
position：定义渐变的位置。与background-position或者transform-origin类似。如缺省，默认为中心点。
1.渐变的起始位置，默认为中心点：
.radial-gradient{
width: 200px;
height: 100px;
background: radial-gradient(circle, red, green, rgba(43,130,255,0.4));
}
image.png
使用at设置渐变的起始位置。以左上角作为坐标原点。
.radial-gradient{
width: 200px;
height: 100px;
background: radial-gradient(circle at 50px 50px, red, green, rgba(43,130,255,0.4));
}
image.png
也可用%设置
.radial-gradient{
width: 200px;
height: 100px;
background: radial-gradient(circle at 30% 50%, red, green, rgba(43,130,255,0.4));
}
image.png
2.指定渐变颜色断点。默认颜色是均匀分布在0 - 100%区域的。
background: radial-gradient(circle, red, green, blue, red);
0 - 25%: red; 25% - 50%: green; 50% - 75%: blue; 75% - 100%: red;
颜色均匀分布
设置断点后的效果。
background: radial-gradient(circle, red, green 10%, blue 40%, red);
0 - 10%: red; 10% - 40%: green; 40% - 100%: 均匀的分布 bule 和 red
按设置的断点分布.png
🌰
下边是使用径向渐变radial-gradient来实现的。
<div class="radial-gradient"></div>
.radial-gradient{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
}
先设置圆的背景色渐变，设置了渐变的起始位置，渐变的颜色。
渐变背景色.png
然后通过伪类给圆的右上角再次设置白色的渐变背景色，使视觉效果更立体。（具怎么设置取决于设计）
.radial-gradient:before {
content: '';
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
background: radial-gradient(circle at 180% -100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}
右上角设置渐变
同样，给左下角设置渐变。（取决于设计）
.radial-gradient:after {
top: 0;
width: 180px;
height: 180px;
content: '';
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 10% 190%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}
径向渐变实现的球体.png
下边是给球体加了动画：
<div class="radial-gradient1"></div>
<div class="radial-gradient2"></div>
.radial-gradient1{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
animation: bubble-anim 5s linear infinite
}
@keyframes bubble-anim{
0% {top: 0; left: 5%}
10% {top: 10%; left: 10%}
20% {top: 20%; left: 15%}
30% {top: 30%; left: 20%}
40% {top: 40%}
50% {top: 50%}
60% {top: 60%}
70% {top: 70%}
80% {top: 80%}
90% {top: 90%}
100% {top: 100%; left: 30%}
}
.radial-gradient1:before {
content: '';
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
background: radial-gradient(circle at 180% -100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}
.radial-gradient1:after {
top: 0;
width: 180px;
height: 180px;
content: '';
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 10% 190%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}
.radial-gradient2{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
animation: bubble-anim2 5s linear infinite
}
@keyframes bubble-anim2{
0% {bottom: 0}
10% {bottom: 10%; left: 10%}
20% {bottom: 20%; left: 20%}
30% {bottom: 30%; left: 30%}
40% {bottom: 45%; left: 40%}
50% {bottom: 50%; left: 50%}
60% {bottom: 65%; left: 60%}
70% {bottom: 75%; left: 70%}
80% {bottom: 80%}
90% {bottom: 90%}
100% {bottom: 100%; left: 50%}
}
.radial-gradient2:before {
content: '';
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
background: radial-gradient(circle at 10% -120%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}
.radial-gradient2:after {
top: 0;
width: 180px;
height: 180px;
content: '';
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 180% 100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}
练习：
径向渐变实现内陷半圆：
div {
width: 520px;
height: 172px;
background: #58a;
background: radial-gradient(circle at 500px 0, transparent 15px, #58a 16px) center top,
radial-gradient(circle at 500px 86px, transparent 15px, #58a 16px) center bottom ;
background-size: 100% 50%;
background-repeat: no-repeat;
}
image.png
参考文章：
你想不到的！CSS 实现的各种球体效果【附在线演示】
10个demo示例学会CSS3 radial-gradient径向渐变
