资源描述
CSS图形基础利用圆锥渐变绘制图形.docx
《CSS图形基础利用圆锥渐变绘制图形.docx》由会员分享，可在线阅读，更多相关《CSS图形基础利用圆锥渐变绘制图形.docx（18页珍藏版）》请在冰豆网上搜索。
CSS图形基础利用圆锥渐变绘制图形
CSS图形基础：
利用圆锥渐变绘制图形
1．圆锥渐变
在CSS中，除了线性渐变（linear-gradient）和径向渐变（radial-gradient）外，还有一种渐变叫“圆锥渐变”。
它是围绕中心点按照扇形方向进行旋转的渐变，而不是像径向渐变那样从中心点沿圆环向外慢慢辐射。
圆锥渐变的调用格式为：
background-image:
conic-gradient（fromangleatposition,start-color,...,stop-color）
其中，参数fromangle可选，表示起始的角度，默认为从上到下；position可选，给定圆锥锥点的位置；start-color定义开始颜色；stop-color定义结束颜色。
设页面中有
，若定义.shape的样式规则为：
.shape
{
margin:
0auto;
width:
400px;
height:
300px;
border:
1pxsolid;
background-image:
conic-gradient（red,yellow）;
}
可在页面中显示如图1所示的图案。
图1中圆锥渐变起始点是图形中心，然后以顺时针方向绕中心实现渐变效果，颜色从红色开始，渐变转为黄色。
图1红色圆锥渐变为黄色
若修改.shape样式中background-image属性定义为：
background-image:
conic-gradient（from90deg,red,yellow）;
则在页面中显示如图2所示的图案。
在图2中可以看出，相比于图1渐变的起始角度旋转了90deg。
图2红色圆锥渐变为黄色（from90deg）
若修改.shape样式中background-image属性定义为：
background-image:
conic-gradient（at20%20%,red,yellow）;
则在页面中显示如图3所示的图案。
在图3中明显看出渐变中心点往左上角方向移了。
图3渐变中心点at20%20%
圆锥渐变可以指定多个颜色，若修改.shape样式中background-image属性定义为：
.shape
{
margin:
0auto;
width:
400px;
height:
300px;
border:
1pxsolid;
background-image:
conic-gradient（red,orange,yellow,green,indigo,blue,violet）;
}
则在页面中显示如图4所示的图案。
图4七彩圆锥渐变
圆锥渐变中指定的颜色可以使用透明度，例如若修改.shape样式中background-image属性定义为：
background-image:
conic-gradient（rgba（255,0,0,0）,rgba（255,0,0,1））;
则在页面中显示如图5所示的图案。
图5使用了透明度的红色圆锥渐变
圆锥渐变中指定的颜色还可以定义停止位置，例如若修改.shape样式中background-image属性定义为：
background-image:
conic-gradient（red15%,green30%,blue60%）;
则在页面中显示如图6所示的图案。
图6颜色结点不均匀分布
若修改.shape样式中background-image属性定义为：
background-image:
conic-gradient（red50%,yellow50%）;
则均在页面中显示如图7所示的图案。
此时，红黄两种颜色平分背景空间，取消了渐变效果。
图7半黄半红
若修改.shape样式中background-image属性定义为：
background-image:
conic-gradient（red33%,yellow33%,yellow66%,blue66%）;
则在页面中显示如图8所示的图案。
图8中心圆周上红黄蓝各占120deg
若修改.shape样式中background-image属性定义为：
background-image:
conic-gradient（red33%,yellow66%,blue66%）;
则在页面中显示如图9所示的图案。
注意图9与图8的差别，图8中的黄色区域在图9中变成了红色向黄色的圆锥渐变。
图9红黄间圆锥渐变
若修改.shape样式中background-image属性定义为：
background-image:
repeating-conic-gradient（red10%,yellow20%）;
则在页面中显示如图10所示的图案。
图10重复的圆锥渐变
若修改.shape样式中background-image属性定义为：
background-image:
repeating-conic-gradient（red0,red11%,yellow11%,
yellow22%,blue22%,blue33%）;
则在页面中显示如图11所示的图案。
图11红黄蓝三色图
（1）
若修改.shape样式中background-image属性定义为：
background-image:
repeating-conic-gradient（red010deg,yellow10deg20deg,
blue20deg30deg）;
则在页面中显示如图12所示的图案。
图12红黄蓝三色图
（2）
需要说明的是：
目前不是所有的主流浏览器都支持圆锥渐变。
本文中的图形效果在“360安全浏览器12”中会得到呈现，但IE11和MicrosoftEdge上会不呈现。
其他的主流浏览器没有进行一一测试，请读者自行测试好了。
2．利用圆锥渐变绘制图形
利用圆锥渐变可以绘制出图形，下面给出一些示例。
（1）饼图。
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
border-radius:
50%;
background:
conic-gradient（red30%,yellow30%,yellow70%,blue70%）;
}
可在页面中显示如图13所示的饼图图案。
图13饼图
若修改.shape样式中background-image属性定义为：
background:
conic-gradient（red050deg,orange0100deg,yellow0150deg,
green0200deg,indigo0250deg,blue0300deg,violet0）;
可在页面中显示如图14所示的七彩饼图图案。
图14七彩饼图
在conic-gradient函数中，050deg的区间使用red，0100deg的区间使用orange、…、0360deg的区间使用violet，而且，先定义的颜色的层叠在后定义的颜色之上。
因此，实际上050deg的区间使用red，50deg100deg的区间使用orange、…、300deg360deg的区间使用violet。
这种写法比较偷懒，无需具体计算，只需给出各颜色的终止角度即可。
（2）条纹。
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
border:
1pxsolid;
border-radius:
50%;
background-image:
repeating-conic-gradient（red050%,yellow50%100%）;
background-size:
50px50px;
}
可在页面中显示如图15所示的垂直条纹图案。
图15圆内垂直条纹
若修改.shape样式中background-image属性定义为：
background-image:
repeating-conic-gradient（from90deg,red050%,yellow50%100%）;
可在页面中显示如图16所示的水平条纹图案。
图16圆内水平条纹
（3）背景图案。
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
border:
1pxsolid;
background:
conic-gradient（from-45deg,#f000180deg,#ff00）;
background-size:
25px50px;
}
可在页面中显示如图17所示的背景图案。
图17背景图案
（1）
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
border:
1pxsolid;
background:
conic-gradient（from60deg,#f000120deg,#ff00240deg,#00f0）;
background-size:
50px50px;
}
可在页面中显示如图18所示的背景图案。
图18背景图案
（2）
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
border:
1pxsolid;
border-radius:
50%;
background-image:
repeating-conic-gradient（red033.3%,yellow066.7%,blue0100%）;
background-size:
50px50px;
}
可在页面中显示如图19所示的圆形背景图案。
图19圆形背景图案
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
border:
1pxsolid;
background:
conic-gradient（#f00090deg,#ff00180deg,#f0f0270deg,#00f0）;
background-size:
25px25px;
}
可在页面中显示如图20所示的背景图案。
图20背景图案（3）
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
border:
1pxsolid;
background:
conic-gradient（#f00045deg,#ff0090deg,#0f00135deg,#00f0180deg,
#f000225deg,#ff00270deg,#0f00315deg,#00f0360deg）;
background-size:
50px50px;
}
可在页面中显示如图21所示的背景图案。
图21背景图案（4）
若定义.shape的样式规则为：
.shape
{
margin:
0auto;
width:
400px;
height:
400px;
border:
1pxsolid;
background:
conic-gradient（#fff90deg,#00090deg180deg,
#fff180deg270deg,#000270deg）;
background-size:
100px100px;
}
可在页面中显示如图22所示的国际象棋棋盘图。
图22国际象棋棋盘
若定义.shape的样式规则为：
.shape
{
width:
200px;
height:
200px;
background:
conic-gradient（#0000,#00012.5%,#fff12.5%,#fff37.5%,
#00037.5%,#00062.5%,#fff62.5%,#fff87.5%,#00087.5%,#0000）;
border:
1pxsolid#000;
background-size:
50px50px;
}
或者
.shape
{
width:
200px;
height:
200px;
background:
repeating-conic-gradient（#0000,#00012.5%,#fff12.5%,#fff37.5%,#00037.5%,#00050%）;
border:
1pxsolid#000;
background-size:
50px50px;
}
均可在页面中显示如图23所示的图形。
图23菱形的平铺
（4）SierPinski地毯。
若定义.shape的样式规则为：
.shape
{
margin:
50pxauto;
width:
200px;
height:
200px;
background:
conic-gradient（from270degatcalc（100%/3）calc（100%/3）,
#f0090deg,transparent0）
calc（200px/3）calc（200px/3）/100%100%,
conic-gradient（from270degatcalc（100%/3）calc（100%/3）,
#f0090deg,transparent0）
calc（100%/6）calc（100%/6）/calc（100%/3）calc（100%/3）,
conic-gradient（from270degatcalc（100%/3）calc（100%/3）,
#f0090deg,transparent0）
calc（100%/6）calc（100%/6）/calc（100%/9）calc（100%/9）;
border:
1pxsolid#000;
}
可在页面中显示如图24所示的SierPinski地毯图形。
图24SierPinski地毯
3．圆锥渐变在动画制作中的应用实例
利用圆锥渐变绘制图形，定义适当的关键帧，可以实现动画效果。
（1）Loading动画。
例如，制作如图25所示的Loading动画效果。
图25Loading动画效果
图25中的Loading圆环其实就是一个圆锥渐变，且使用了CSS遮罩属性只让外圈25%的范围显示，定义关键帧让圆环旋转起来，Loading圆环动画效果就出现了。
编写的HTML文件如下。
DOCTYPEhtml>
Loading动画
升级会员 