美文网首页Html/Css
CSS3知识汇总20:conic-gradient

CSS3知识汇总20:conic-gradient

作者: 0清婉0 | 来源:发表于2021-02-25 20:33 被阅读0次

今天在学习时,看到一个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);}

}

相关文章

  • CSS3知识汇总20:conic-gradient

    今天在学习时,看到一个conic-gradient,一查原来是渐变的一个新属性,目前浏览器兼容性不是很好。但这个属...

  • CSS3知识汇总14

    【半透明边框】 body{background-color:green}img{ border:10px sol...

  • css3知识汇总:切角

    1.使用渐变 因为渐变可以接受一个角度,比如45deg作为方向,而且色标的位置信息也可以是绝对的长度值,不受容器尺...

  • CSS3知识汇总1

    :nth-child()函数 可以接收一个形如an+b的表达式作为参数,其中a和b是整数,n是从0开始的自然数列 ...

  • CSS3知识汇总5

    【渐变】 线性渐变:从一个位置开始向某个特定的方向渐变,如叶片 径向渐变:从一个位置开始向四周渐变,如灯光散落 l...

  • CSS3知识汇总4

    今晚有个小激动,放下学习后,意外的得到了一笔小回报,虽然钱不多,但很开心。11月学习一小本英文书时发现一个错误,一...

  • CSS3知识汇总2

    这几天学习H5微场景时,发现css知识有些模糊,记得学习CSS时是2007年,到今天已经13年。 之前有很多CSS...

  • CSS3知识汇总3

    19.box-sizing content-box Element Width/Height = border +...

  • CSS3知识汇总15

    渐变组合:透过彼此的透明区域显现 网格图案--桌布 div{ width: 30em; height:30em...

  • CSS3知识汇总9

    这两天晚上都要加班,实在没时间写简书了,就把之前学习的先贴上吧。等春节时,要继续好好学习。多读书,只有自己能力强了...

网友评论

    本文标题:CSS3知识汇总20:conic-gradient

    本文链接:https://www.haomeiwen.com/subject/hgoufltx.html