今天在学习时，看到一个conic-gradient，一查原来是渐变的一个新属性，目前浏览器兼容性不是很好。但这个属性制作饼图特别方便。
浏览器兼容性
渐变分为线性渐变（linear-gradient）和径向渐变（radial-gradient）
线性渐变是颜色沿着一条笔直的轴线变化
径向渐变是以一个点为圆心向四周扩散
div:nth-child(1){
width: 100px;
height:100px;
background-image:linear-gradient(to bottom right, orange 0, orange 49%, transparent 50%, transparent 100%)
}
div:nth-child(2){
width: 100px;
height:100px;
background:repeating-linear-gradient(45deg, #fb3, #fb3 5px, #58a 0, #5ba 10px)
}
div:nth-child(3){
width: 100px;
height:100px;
background:radial-gradient(transparent 0, transparent 49%, orange 50%, orange 100%);
}
主角登场：
锥形渐变conic-gradient
也是以一个点为中心起始点，但是由内向外扩散，沿着圆周变化
conic-gradient(from 起始角度 at 中心点位置，渐变断点)
角度值是一个相对角度值，最终渲染的角度值是和起始角度累加的值
例：调色板
div{
width: 100px;
height:100px;
border-radius: 50%;
background:conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
}
三色饼图
div{
width: 100px;
height:100px;
border-radius: 50%;
background:conic-gradient(#3ebd3e 0, #3ebd3e 30%, #ff9800 30%, #ff9800 70%, #03a9f4 70%, #03a9f4 100%);
}
三色边框
div{
position: relative;
width: 100px;
height:100px;
background:conic-gradient(#3ebd3e 0, #3ebd3e 30%, #ff9800 30%, #ff9800 70%, #03a9f4 70%, #03a9f4 100%);
}
div:after{
content:'';
position: absolute;
width: 90%;
height: 90%;
top:5%;
left:5%;
background:white;
/*中间加一个空白*/
}
圆形边框
div{
position: relative;
width: 100px;
height:100px;
border-radius: 50%;
background:conic-gradient(#3ebd3e 0, #3ebd3e 30%, #ff9800 30%, #ff9800 70%, #03a9f4 70%, #03a9f4 100%);
}
div:after{
content:'';
position: absolute;
width: 80%;
height: 80%;
top:10%;
left:10%;
background:white;
/*中间加一个空白*/
border-radius:50%;
}
loading
div{
width: 100px;
height:100px;
border-radius: 50%;
background:conic-gradient(#ff8100 30%, white);
-webkit-mask-image:radial-gradient(closest-side, transparent 80%, black 76%);
mask-image:radial-gradient(closest-side, transparent 80%, black 76%);
animation: spin 1s linear infinite reverse;
}
@keyframes spin{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
网友评论