徑向漸變radial-gradient(shape size at position, start-color, ... , end-color)
-
shape：確定圓的類型宾袜。默認(rèn)為橢圓形ellipse获洲，也可設(shè)置為圓形circle涣旨〔酃鳎可通過at指定起始點(diǎn)位置。 -
size：定義漸變的大小酝掩，指定徑向漸變的半徑長度屿笼。默認(rèn)為farthest-corner從圓心到離圓心最遠(yuǎn)的角；closest-side從圓心到離圓心最近的邊骚灸；farthest-side糟趾、closest-corner。 -
position：定義漸變的位置甚牲。與background-position或者transform-origin類似义郑。如缺省，默認(rèn)為中心點(diǎn)丈钙。
1.漸變的起始位置非驮，默認(rèn)為中心點(diǎn)：
.radial-gradient{
width: 200px;
height: 100px;
background: radial-gradient(circle, red, green, rgba(43,130,255,0.4));
}
image.png
使用at設(shè)置漸變的起始位置。以左上角作為坐標(biāo)原點(diǎn)雏赦。
.radial-gradient{
width: 200px;
height: 100px;
background: radial-gradient(circle at 50px 50px, red, green, rgba(43,130,255,0.4));
}
image.png
也可用%設(shè)置
.radial-gradient{
width: 200px;
height: 100px;
background: radial-gradient(circle at 30% 50%, red, green, rgba(43,130,255,0.4));
}
image.png
2.指定漸變顏色斷點(diǎn)劫笙。默認(rèn)顏色是均勻分布在0 - 100%區(qū)域的芙扎。
background: radial-gradient(circle, red, green, blue, red);
0 - 25%: red; 25% - 50%: green; 50% - 75%: blue; 75% - 100%: red;
顏色均勻分布
設(shè)置斷點(diǎn)后的效果。
background: radial-gradient(circle, red, green 10%, blue 40%, red);
0 - 10%: red; 10% - 40%: green; 40% - 100%: 均勻的分布 bule 和 red
按設(shè)置的斷點(diǎn)分布.png
??
下邊是使用徑向漸變radial-gradient來實(shí)現(xiàn)的填大。
<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));
}
先設(shè)置圓的背景色漸變戒洼，設(shè)置了漸變的起始位置，漸變的顏色允华。
漸變背景色.png
然后通過偽類給圓的右上角再次設(shè)置白色的漸變背景色圈浇，使視覺效果更立體。（具怎么設(shè)置取決于設(shè)計(jì)）
.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%)
}
右上角設(shè)置漸變
同樣靴寂，給左下角設(shè)置漸變磷蜀。（取決于設(shè)計(jì)）
.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%)
}
徑向漸變實(shí)現(xiàn)的球體.png
下邊是給球體加了動(dòng)畫：
<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%)
}
練習(xí)：
徑向漸變實(shí)現(xiàn)內(nèi)陷半圓：
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 實(shí)現(xiàn)的各種球體效果【附在線演示】
10個(gè)demo示例學(xué)會(huì)CSS3 radial-gradient徑向漸變
