当前位置: 首页 > Web前端 > CSS

CSS3conegradientconic-gradient

时间:2023-03-30 23:48:03 CSS

注:单独搜索cone比较方便。语法:background-image:conic-gradient(fromangleatposition,start-color,...,last-color)第一个参数:fromangle:起始角度,可选,默认为从上到下position:图像的位置conepoint第二个参数:start-color:定义起始颜色stop-color:定义结束颜色1、第一个参数同理,第一个参数可以为空,默认角度为0deg,圆锥中心为中心点的形状。例如:background-image:conic-gradient(#69f,#fd44ff);我们可以改变起始角度,比如:background-image:conic-gradient(from-90deg,#69f,#fd44ff);改变圆锥中心的位置:background-image:conic-gradient(from-90degat80px120px,#69f,#fd44ff)2.第二个参数与线性和径向渐变相同,可以设置颜色和渐变的起始位置。position接受的参数是百分比和角度。例如:background-image:conic-gradient(#69f10%,#fd44ff10%);上面的代码相当于:background-image:conic-gradient(#69f36deg,#fd44ff36deg);显示效果如下:3.RepeatConicalgradients与线性渐变和径向渐变一样,圆锥渐变也具有重复的属性。背景图像:重复圆锥梯度(#69f036deg,#fd44ff36deg72deg);效果如图:这张渲染图是不是感觉有点眼熟?我们把它设为一个圆圈,加一个按钮,它就是一张彩票盘。效果如下:地址:https://codepen.io/jianxiujiucan/pen/bGddbez我们可以用cones做各种加载效果:地址:https://codepen.io/jianxiujiucan/pen/bGdGyKN第二次加载请自己研究写练习~我们可以用渐变画出各种效果。例如字母:https://codepen.io/jianxiujiucan/pen/gOppOdP