乐趣区

关于前端:细说css的渐变属性conicgradientlineargradientradialgradient

jiezi

实现成果

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

退出移动版