实现成果
1.什么是conic-gradient(圆锥突变）
conic-gradient是圆锥突变，以一个点为核心起始点，沿着圆周变动。
语法：conic-gradient( from 起始角度 at 中心点地位, 突变断点 )
兼容性：
一个简略的例子：看清他的突变方向，起始点是图形核心，而后以顺时针方向绕核心实现突变成果。
<style> section{ margin: 40px auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .a{ background:conic-gradient(#000, #fff); width: 200px; height: 200px; } </style> <body> <section> <h1>一个简略的例子</h1> <div class="a"></div> </section> </body>2.linear-gradient : 线性突变
linear-gradient 线性突变的方向是一条直线，能够是任何角度，向下/向上/向左/向右/对角方向。看一个简略的例子。repeating-linear-gradient（）示意反复的线性突变。
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
为了创立一个线性突变，你必须至多定义两种色彩节点。色彩节点即你想要出现平稳过渡的色彩。同时，你也能够设置一个终点和一个方向（或一个角度）。
<section> <h1>一个简略的例子linear-gradient</h1> <div class="b"></div></section><section> <h1>一个例子repeating-linear-gradient</h1> <div class="c"></div></section>.b{ background:linear-gradient(to top right ,red 0,yellow 50%,transparent 50%,transparent 100%); width: 200px; height: 200px;}.c{ background:repeating-linear-gradient(45deg,#55aa7f,#55ff7f,5px ,#ffaaff 0,#ff55ff 20px); width: 200px; height: 200px;}3.radial-gradient : 径向突变
径向突变是从圆心点以椭圆形状向外扩散。
语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 参数定义了形态。它能够是值 circle 或 ellipse。其中，circle 示意圆形，ellipse 示意椭圆形。默认值是 ellipse。
<section> <h1>一个例子radial-gradient</h1> <div class="d"></div></section><section> <h1>一个例子radial-gradient椭圆形 Ellipse（默认）：</h1> <div class="e"></div></section><section> <h1>一个例子radial-gradient圆形 Circle：</h1> <div class="f"></div></section>.d{ background-image:radial-gradient(transparent 0,transparent 49%,#ffaaff 50%,#3eff8b 100%); width: 200px; height: 200px;}.e{ background-image:radial-gradient(#ffaaff ,#3eff8b,#000); width: 300px; height: 200px;}.f{ background-image:radial-gradient(circle,#ffaaff ,#3eff8b,#000); width: 300px; height: 200px;}3.1反复的径向突变
repeating-radial-gradient() 函数用于反复径向突变。
<section> <h1>一个反复的radial-gradient</h1> <div class="g"></div></section>.g{ width: 300px; height: 200px; background-image: repeating-radial-gradient(#ffaaff 10% ,#3eff8b 20%,#000 10%); }4.重点的说一下conic-gradient（锥形突变的利用）
4.1色彩表盘
.j{ background:conic-gradient(red, orange, yellow, green, teal, blue, purple,red); width: 200px; height: 200px; border-radius: 50%;}<section> <h1>conic-gradient实现色彩表盘</h1> <div class="j"></div></section>4.2圆环进度条
<section> <h1>conic-gradient实现圆弧进度条成果</h1> <div class="n" style="background-image:conic-gradient(from -180deg,#a8c992 77%,#ebebeb 0%)"> <text class="n-text">77%</text> </div></section>.n{ width: 200px; height: 200px; border-radius: 50%; position: relative;}.n::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; border-radius: 50%; background-color: #fff;}.n-text{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 20rpx; color: #a8c992;}4.3实现饼图
<section> <h1>conic-gradient实现饼图</h1> <div class="o"></div></section>.o{ width: 200px; height: 200px; border-radius: 50%; /* 写法一： */ background: conic-gradient(#ffaaff 0, #ffaaff 20%, #aa55ff 20%, #aa55ff 60%, #aaff7f 60%, #aaff7f 100%); /* 写法二： */ /* background: conic-gradient(#ffaaff 0 20%, #aa55ff 30% 70%, #aaff7f 70% 100%); */}4.4实现棋盘
<section> <h1>conic-gradient实现棋盘成果</h1> <div class="k"></div></section>.k{ width: 400px; height: 200px; background: conic-gradient(#eee 25%, white 0deg 50%, #eee 0deg 75%, white 0deg) 0 / 20px 20px;}5.反复圆锥突变 repaeting-conic-gradient
.q{ width: 400px; height: 300px; background: repeating-conic-gradient(#aaaa7f 0 15deg, #fff 0 30deg);}<section> <h1>反复conic-gradient</h1> <div class="q"></div></section>6.更多案例请移步
https://gitee.com/susuhhhhhh/css_demos