radial-gradient() 函數用于創(chuàng )建一個(gè)徑向漸變的“圖像”，其一般調用格式為：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
其中，參數shape定義漸變的形狀，默認值為ellipse，指定橢圓形的徑向漸變，值circle指定圓形的徑向漸變。
參數size 定義漸變的大小，可能值有：
farthest-corner（默認）：指定徑向漸變的半徑長(cháng)度為從圓心到離圓心最遠的角；
closest-side：指定徑向漸變的半徑長(cháng)度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長(cháng)度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長(cháng)度為從圓心到離圓心最遠的邊；
參數position 定義漸變的位置?？赡苤涤校?/p>
center（默認）：設置中間為徑向漸變圓心的縱坐標值。
top：設置頂部為徑向漸變圓心的縱坐標值。
bottom：設置底部為徑向漸變圓心的縱坐標值。
參數start-color，…，last-color用于指定漸變的起止顏色，可以使用長(cháng)度值或百分比來(lái)指定起止色位置，但不允許負值。
repeating-radial-gradient() 函數用于創(chuàng )建重復的徑向漸變“圖像”，其一般調用格式為：
background-image: repeating-radial-gradient(shape size at position,start-color, ..., last-color);
設在頁(yè)面中有<div class="shape"></div>，若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red , yellow);
}
可在頁(yè)面中顯示如圖1所示的圖案。圖1中徑向漸變從中心點(diǎn)開(kāi)始以橢圓的形式向外漸變，顏色從紅色開(kāi)始，漸變轉為黃色。
圖1 紅色以橢圓形狀漸變?yōu)辄S色
若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(circle, red , yellow);
則在頁(yè)面中顯示如圖2所示的圖案。圖2中徑向漸變是以圓形的方式進(jìn)行，顏色同樣從紅色開(kāi)始，漸變轉為黃色。
圖2 圓形徑向漸變
若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(closest-side , red , yellow);
則在頁(yè)面中顯示如圖3所示的圖案。此時(shí)由于指定徑向漸變的半徑長(cháng)度為從圓心到離圓心最近的邊（上下兩條邊），因此圖3對比圖1，黃色面積明顯增大。讀者可以試試將closest-side 依次修改為farthest-corner（默認）、closest-corner和farthest-side后，頁(yè)面顯示的圖形與圖3的差別。
圖3 漸變大小為closest-side的徑向漸變
若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(closest-side at 60% 55%, red , yellow);
則在頁(yè)面中顯示如圖4所示的圖案。由于設置的漸變中心位置往右下偏了，因此圖4中的橢圓形狀向右下偏。
圖4 漸變中心位置at 60% 55%
徑向漸變可以指定多個(gè)顏色，例如若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(red,orange,yellow,green,indigo,blue,violet);
則在頁(yè)面中顯示如圖5所示的圖案。
圖5 七彩徑向漸變
徑向漸變中指定的顏色可以使用透明度，例如若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient( rgba(255,0,0,0), rgba(255,0,0,1));
則在頁(yè)面中顯示如圖4所示的圖案。
圖6 使用了透明度的紅色徑向漸變
徑向漸變中指定的顏色還可以定義停止位置，例如若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(red 5%, green 15%, blue 60%);
則在頁(yè)面中顯示如圖7所示的圖案。
圖7 顏色結點(diǎn)不均勻分布
若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(red 50%, yellow 50%);
則均在頁(yè)面中顯示如圖8所示的圖案。此時(shí)，紅黃兩種顏色界限清楚，取消了漸變效果。
圖8 黃底紅圓
若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(red 33%, yellow 33%, yellow 66%,blue 66%);
則在頁(yè)面中顯示如圖9所示的圖案。
圖9 藍底中的紅黃橢圓
若修改.shape樣式中background-image屬性定義為：
background-image:radial-gradient(red 33%, yellow 66%,blue 66%);
則在頁(yè)面中顯示如圖10所示的圖案。注意圖10與圖9的差別，圖10中間部分是紅色向黃色的徑向漸變。
圖10 紅黃間徑向漸變
若修改.shape樣式中background-image屬性定義為：
background-image: repeating-radial-gradient(red, yellow 10%, blue 15%);
則在頁(yè)面中顯示如圖11所示的圖案。
圖11 重復的徑向漸變
若修改.shape樣式中background-image屬性定義為：
background-image: repeating-radial-gradient(circle, red 0, red 10px,
yellow 10px, yellow 20px, blue 20px, blue 30px) ;
則在頁(yè)面中顯示如圖12所示的圖案。
圖12 紅黃藍三色圓環(huán)
利用徑向漸變可以繪制出圖形，下面給出一些示例。
（1）同心圓。
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid;
border-radius: 50%;
background-image: repeating-radial-gradient(red 0px, red 10px, #fff 10px, #fff 20px);
}
可在頁(yè)面中顯示如圖13所示的紅色同心圓圖案。
圖13 紅色同心圓
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid;
background-image: radial-gradient(60px at center center ,#fff 50% ,#000 50%);
}
可在頁(yè)面中顯示如圖14所示的黑白同心圓圖案。
圖14 黑白同心圓
若修改.shape樣式中background-image屬性定義為：
background-image: radial-gradient(60px at center center ,#000 50%,#fff 50%);
可在頁(yè)面中顯示如圖15所示的白黑同心圓圖案。
圖15 白黑同心圓
若定義.shape的樣式規則為：
.shape
{
margin:0 auto;
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(#f00, #f00 4px, #ff0 5px, #f00 6px);
background-size: 100% 100%;
}
可在頁(yè)面中顯示如圖16所示的同心圓圖案。
圖16 同心圓（background-size: 100% 100%;）
若修改上面.shape樣式中background-size屬性定義為：background-size: 50% 100%;，則頁(yè)面中顯示如圖17所示的圖案。
圖17 同心圓（background-size: 50% 100%;）
若修改上面.shape樣式中background-size屬性定義為：background-size: 100% 50%;，則頁(yè)面中顯示如圖18所示的圖案。
圖18 同心圓（background-size: 100% 50%;）
若修改上面.shape樣式中background-size屬性定義為：background-size: 50% 50%;，則頁(yè)面中顯示如圖19所示的圖案。
圖19 同心圓（background-size: 50% 50%;）
若定義.shape的樣式規則為：
.shape
{
position: absolute;
width: 262px;
height: 262px;
border-radius: 50%;
background: repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,#2a2928 6px);
}
.shape:after
{
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px;
height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
}
可在頁(yè)面中顯示如圖20所示的唱片圖案。
圖20 唱片
（2）圓與橢圓。
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid;
background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
}
可在頁(yè)面中顯示如圖21所示的圓中有橢圓的圖案。
圖21 圓與橢圓（1）
若修改.shape樣式中background-image屬性定義為：
background: radial-gradient(100px 50px ellipse, transparent 80px, yellow 81px, red);
可在頁(yè)面中顯示如圖22所示的圖案。
圖22 圓與橢圓（2）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(50px 100px ellipse, transparent 40px,
yellow 41px, red 49px, transparent 50px),
radial-gradient(30px circle, red, red 29px, transparent 30px);
}
可在頁(yè)面中顯示如圖23所示的橢圓中有圓的圖案。這個(gè)圖案像一只豎眼。
圖23 橢圓與圓
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid;
background:radial-gradient(10px 18px ellipse, transparent 8px,
yellow 9px, red 11px, transparent 13px),
radial-gradient(6px circle, red, red 6px, transparent 7px);
background-size: 50px 50px;
}
可在頁(yè)面中顯示如圖24所示的排列的豎眼圖案。
圖24 “豎眼”的排列
若修改.shape樣式中background-image屬性定義為：
background:radial-gradient(10px 50px ellipse, transparent 8px,
yellow 9px, red 11px, transparent 13px),
radial-gradient(6px circle, red, red 6px, transparent 7px);
實(shí)際上只是將18px修改為50px，則在頁(yè)面中顯示如圖25所示的圖案。
圖25 豎線(xiàn)中夾著(zhù)圓
（3）眼睛。
若定義.shape的樣式規則為：
.shape
{
margin: 50px auto;
width: 224px;
height: 128px;
background-color: #333;
border-radius: 50% 50% 45% 42%;
background-image:
radial-gradient(circle at 128px 64px, white 10px, transparent 10px),
radial-gradient(circle at 112px 64px, #333 22px, transparent 22px),
radial-gradient(circle at 112px 64px, white 32px, transparent 32px);
}
可在頁(yè)面中顯示如圖26所示的黑眼睛圖案。
圖26 黑眼睛
（4）圓弧切角。
若定義.shape的樣式規則為：
.shape
{
margin: 50px auto;
width:200px;
height: 200px;
background:#f0f;
background:radial-gradient(circle at top left,transparent 25px,#f0f 0) top left,
radial-gradient(circle at top right,transparent 25px,#f0f 0) top right,
radial-gradient(circle at bottom right,transparent 25px,#f0f 0) bottom right,
radial-gradient(circle at bottom left,transparent 25px,#f0f 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
可在頁(yè)面中顯示如圖27所示的圓弧切角矩形圖案。
圖27 圓弧切角矩形
（5）背景圖案。
若定義.shape的樣式規則為：
.shape
{
margin: 50px auto;
width:400px;
height: 400px;
background: radial-gradient(white 15%, transparent 16%),
radial-gradient(white 15%, transparent 16%), #d8d8d8;
background-position: 0 0, 50px 50px;
background-size: 100px 100px;
}
可在頁(yè)面中顯示如圖28所示的圓點(diǎn)背景圖案。
圖28 圓點(diǎn)背景圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background-image:radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
radial-gradient(black 15%,transparent 16%),
radial-gradient(black 15%,transparent 16%);
background-position: 0 0px,10px 10px,0 1px,10px 11px;
background-size: 20px 20px;
}
可在頁(yè)面中顯示如圖29所示的格子背景圖案。
圖29 格子背景圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, rgba(255,0,0,0) 98%,rgba(255,0,0,1) 99%);
background-size: 80px 80px;
}
可在頁(yè)面中顯示如圖30所示的背景圖案。下面有一些背景圖案不好命名，就統一用背景圖案稱(chēng)呼吧。
圖30 背景圖案（1）
將圖30的圓餅交錯地進(jìn)行迭加，修改.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, rgba(255,0,0,0) 98%,rgba(255,0,0,1) 99%),
radial-gradient(closest-side,rgba(255,0,0,0) 98%,
rgba(255,0,0,1) 99%);
background-position: 0 0px,40px 40px;
background-size: 80px 80px;
}
可在頁(yè)面中顯示如圖31所示的背景圖案。
圖31 背景圖案（2）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, transparent 0%, transparent 75%,
#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,
#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%);
background-size: 100px 100px;
}
可在頁(yè)面中顯示如圖32所示的背景圖案。
圖32 背景圖案（3）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, transparent 0%, transparent 75%,
#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,
#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%),
radial-gradient(closest-side, transparent 0%, transparent 75%,
#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,
#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%);
background-position: 0 0px, 50px 50px;
background-size: 100px 100px;
}
可在頁(yè)面中顯示如圖33所示的背景圖案。
圖33 背景圖案（4）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, transparent 0%, transparent 75%,
#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,
#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%,
#798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%,
#E0EAD7 131%, #E0EAD7 140%),
radial-gradient(closest-side, transparent 0%, transparent 75%,
#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,
#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%,
#E0EAD7 131%, #E0EAD7 140%);
background-position: 0 0px, 50px 50px;
background-size: 100px 100px;
}
可在頁(yè)面中顯示如圖34所示的背景圖案。
圖34 背景圖案（5）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#fff;
background-image: radial-gradient(SeaGreen 9px, transparent 10px),
repeating-radial-gradient(SeaGreen 0px, SeaGreen 4px, transparent 5px,
transparent 20px, SeaGreen 21px, SeaGreen 25px,
transparent 26px, transparent 50px);
background-position: 0 0;
background-size: 30px 30px, 90px 90px;
}
可在頁(yè)面中顯示如圖35所示的背景圖案。
圖35 背景圖案（6）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image: radial-gradient(closest-side circle at 60% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 22%, #f00 45%,rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 60% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 50% 35%, #f00 30%, rgba(255, 0, 0, 0) 31%),
radial-gradient(closest-side circle at 60% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 60% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 50% 35%, #f00 30%, rgba(255, 0, 0, 0) 31%);
background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%,50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
background-size: 100px 100px;
}
可在頁(yè)面中顯示如圖36所示的紅心背景圖案。
圖36 紅心背景圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background:radial-gradient(circle at 50% 59%, #fff 3%, #000 4%,
#000 11%,rgba(0,0,0,0) 12%, rgba(0,0,0,0)) 60px 0,
radial-gradient(circle at 50% 41%, #000 3%, #fff 4%, #fff 11%,
rgba(255,255,255,0) 12%, rgba(255,255,255,0)) 60px 0,
radial-gradient(circle at 50% 59%, #fff 3%, #000 4%,
#000 11%, rgba(0,0,0,0) 12%, rgba(0,0,0,0)) 0 60px,
radial-gradient(circle at 50% 41%, #000 3%, #fff 4%,
#fff 11%, rgba(255,255,255,0) 12%, rgba(255,255,255,0)) 0 60px,
radial-gradient(circle at 100% 50%, #fff 16%, rgba(255,255,255,0) 17%),
radial-gradient(circle at 0% 50%, #000 16%, rgba(0,0,0,0) 17%),
radial-gradient(circle at 100% 50%, #fff 16%,rgba(255,255,255,0) 17%) 60px 60px,
radial-gradient(circle at 0% 50%, #000 16%,rgba(0,0,0,0) 17%) 60px 60px;
background-color:#f0f;
background-size:120px 120px;
}
可在頁(yè)面中顯示如圖37所示的太極背景圖案。
圖37 太極背景圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background:radial-gradient(circle farthest-side at 0% 50%,
#fb1 23.5%,rgba(240,166,17,0) 0) 21px 30px,
radial-gradient(circle farthest-side at 0% 50%,
#B71 24%,rgba(240,166,17,0) 0) 19px 30px,
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0,
rgba(240,166,17,0) 85%,#fb1 0) 0 0,
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,
rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,
#B71 0,#B71 76%,#fb1 0) 0 0,
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,
rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,
#B71 0,#B71 76%,#fb1 0) 0 0,
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%) 0 0 #fb1;
background-size:40px 60px;
}
可在頁(yè)面中顯示如圖38所示的六邊形地磚背景圖案。
圖38 六邊形地磚背景圖案
利用徑向漸變繪制圖形，定義適當的關(guān)鍵幀，可以實(shí)現動(dòng)畫(huà)效果。
（1）圓點(diǎn)的擴散。
編寫(xiě)如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>圓點(diǎn)的擴散</title> <style> .shape { margin: 50px auto; width:400px; height: 400px; border: 1px solid; background: radial-gradient(circle, #f00, #f00 6px, transparent 7px); background-size: 200px 200px; animation: anim 8s linear infinite alternate; } @keyframes anim { 0% { background-size:400px 400px; } 25% { background-size:200px 200px; } 50% { background-size:100px 100px; } 75% { background-size:50px 50px; } 100% { background-size:25px 25px; } } </style> </head> <body> <div class="shape"></div> </body> </html>
在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現出如圖39所示的動(dòng)畫(huà)效果。
圖39 圓點(diǎn)的擴散
（2）Loading動(dòng)畫(huà)。
編寫(xiě)如下的HTML文件。
<!DOCTYPE html> <html> <title>Loading動(dòng)畫(huà)</title> <head> <style> .shape { margin: 0 auto; width: 300px; height:300px; position: relative; display: grid; overflow: hidden; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape::before, .shape::after { padding: 100px; place-self: center; grid-column: 1; grid-row: 1; --stops: #fff 15px, transparent 16px; background: radial-gradient(circle at 16px, var(--stops)), radial-gradient(circle at 50% 16px, var(--stops)), radial-gradient(circle at calc(100% - 16px), var(--stops)), radial-gradient(circle at 50% calc(100% - 16px), var(--stops)); animation: rotate 1s ease-in-out infinite; content: ""; } .shape::before { animation-name: move; } @keyframes rotate { 33.33% { transform: rotate(0deg); } 66.67%, 100% { transform: rotate(90deg); } } @keyframes move { 33.33%, 66.67% { padding: 16px;} } </style> </head> <body> <div class="shape"></div> </body> </html>
在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現出如圖40所示的動(dòng)畫(huà)效果。
圖40 Loading動(dòng)畫(huà)效果
（3）旋轉的太極圖。
在前面圖14和圖15采用徑向漸變繪制了一個(gè)黑白同心圓和一個(gè)白黑同心圓。采用漸變的方法可以方便地繪制一個(gè)太極圖。具體做法是：先讓.shape所在的div通過(guò)線(xiàn)性漸變設置成一半黑一半白，再設置成圓形；然后通過(guò).shape::before和shape::after采用徑向漸變分別繪制了一個(gè)黑白同心圓和一個(gè)白黑同心圓嵌入到一般黑和一半白的圓中。
編寫(xiě)的HTML文件如下。
<!DOCTYPE html> <html> <head> <title>旋轉的太極</title> <style> .container { margin: 0 auto; width: 450px; height:450px; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { position: relative; width: 400px; height: 400px; border-radius: 50%; background-image: linear-gradient(90deg,#fff 50%,#000 50%); animation:rotate 2s linear infinite; } .shape::before,.shape::after { content: ''; width: 200px; height: 200px; border-radius: 50%; position: absolute; left: 25%; } .shape::before { background-image:radial-gradient(60px at center center ,#fff 50% ,#000 50%); } .shape::after { bottom: 0px; background-image:radial-gradient(60px at center center ,#000 50% ,#fff 50%); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform:rotate(-360deg); } } </style> </head> <body> <div class="container"> <div class="shape"></div> </div> </body> </html>
在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現出如圖41所示的動(dòng)畫(huà)效果。
圖41 旋轉的太極
聯(lián)系客服
