前言
??CSS 圓錐漸變+MASK遮罩實現(xiàn)WIFI圖標，速速來Get吧~
??文末分享源代碼。記得點贊+關(guān)注+收藏！
1.實現(xiàn)效果
image.png
2.實現(xiàn)步驟
- 定義css變量--bg背景色，--dot弧寬度，--w父元素寬度，--gap，各弧度之間的間距
:root {
--bg: #fff;
--dot: 20px;
--w: 300px;
--gap: 45px;
}
- 定義父元素container
image.png
<div class="container"></div>
.container {
width: var(--w);
position: relative;
border: 1px solid red;
}
- 父元素內(nèi)添加一個子元素line
image.png
<div class="container">
+ <div class="line" ></div>
</div>
- 設(shè)置line樣式為absolute定位，設(shè)置寬高為--w,圓角50%，背景設(shè)置圓錐漸變，--bg占據(jù)35%，剩下為透明色；
conic-gradient()：
CSS 函數(shù) conic-gradient() 創(chuàng)建了一個由漸變組成的圖像，漸變的顏色變換圍繞一個中心點旋轉(zhuǎn)（而不是從中心輻射）。錐形漸變的例子包括餅圖和色輪 color wheels (en-US). conic-gradient() 函數(shù)的結(jié)果是 gradient 數(shù)據(jù)類型的對象，是一種特殊的 image 數(shù)據(jù)類型。
image.png
.line{
position: absolute;
width: var(--w);
height: var(--w);
border-radius: 50%;
background: conic-gradient(var(--bg) 35%, transparent 35%);
}
- 為line設(shè)置mask遮罩，弧形寬度為--dot，那么漸變的值則為父元素寬度的一半（--w/2）減去dot
image.png
.line{
-webkit-mask: radial-gradient(
transparent calc(var(--w) / 2 - var(--dot) - 1px),
#000 calc(var(--w) / 2 - var(--dot))
);
}
- 為line添加前后偽元素，居于圓的正中間，寬高為dot，圓角50%，背景色為--bg；
image.png
.line::before,
.line::after {
content: "";
position: absolute;
width: var(--dot);
height: var(--dot);
border-radius: 50%;
left: calc(var(--w) / 2 - var(--dot) / 2);
top: calc(var(--w) / 2 - var(--dot) / 2);
background: var(--bg);
}
- mask遮罩的存在，使得偽元素不可見，通過調(diào)試可以看到相應(yīng)的位置；
image.png
- 調(diào)整前偽元素的位置，使其移動到圓弧的最上方
image.png
.line::before {
transform: translate(0, calc(var(--dot) / 2 - var(--w) / 2));
}
- 調(diào)整后偽元素的位置，使其移動到圓弧的最下方
image.png
.line::after {
transform: rotate(calc(360deg * 0.35))
translate(0, calc(var(--dot) / 2 - var(--w) / 2));
}
- 將line元素整體旋轉(zhuǎn)60deg，就得到一個完整的圓弧了
image.png
.line{
transform: rotate(-60deg);
}
- 接下來，我們實現(xiàn)剩余圓弧以及中間圓點
- 再次定義兩個line元素
<div class="container">
<div class="line" ></div>
+ <div class="line" ></div>
+ <div class="line" ></div>
</div>
- 根據(jù)gap，動態(tài)修改圓弧的寬度，并設(shè)置定位，可以參考CSS 實現(xiàn)七彩圓環(huán)loading動畫
- 第一，第二圓環(huán)寬度
image.png
- 第三個圓環(huán)寬度
image.png
- 可以得到，每個圓環(huán)的寬度為calc(var(–w) - var(–gap) * 2 * var(–i))，i為當(dāng)前圓環(huán)的索引位置（從0開始，依次+1）
- 為line元素設(shè)置行內(nèi)css變量--i
<div class="container">
<div class="line" style="--i: 0"></div>
<div class="line" style="--i: 1"></div>
<div class="line" style="--i: 2"></div>
</div>
- 修改line元素的寬高，將相關(guān)的--w替換為--width
image.png
.line {
--width: calc(var(--w) - var(--gap) * 2 * var(--i));
width: var(--width);
height: var(--width);
-webkit-mask: radial-gradient(
transparent calc(var(--width) / 2 - var(--dot) - 1px),
#000 calc(var(--width) / 2 - var(--dot))
);
}
.line::before,
.line::after {
left: calc(var(--width) / 2 - var(--dot) / 2);
top: calc(var(--width) / 2 - var(--dot) / 2); *
}
.line::before {
transform: translate(0, calc(var(--dot) / 2 - var(--width) / 2));
}
.line::after {
transform: rotate(calc(360deg * 0.35))
translate(0, calc(var(--dot) / 2 - var(--width) / 2));
}
- 為每個半圓環(huán)（line元素）設(shè)置top，第一個圓環(huán)為0，第二個為gap，第三個為gap*2，可得到top為 calc(var(–gap) * var(–i))，并水平居中
image.png
.line{
/* 水平居中 */
left: calc(50% - var(--width) / 2);
/* 距離頂部的距離，根據(jù)gap來定 */
top: calc(var(--gap) * var(--i));
}
- 父元素內(nèi)添加dot元素，寬高為dot，背景色為--bg，圓角50%，水平居中，top為第一個圓環(huán)的位置即為calc(var(--gap) * 3)
image.png
<div class="container">
+ <div class="dot"></div>
</div>
.dot {
position: absolute;
width: var(--dot);
height: var(--dot);
border-radius: 50%;
top: calc(var(--gap) * 3);
background: var(--bg);
left: calc(50% - var(--dot) / 2);
}
- 設(shè)置父元素的高度為calc(var(--gap) * 3 + var(--dot))
image.png
image.png
.container {
+ height: calc(var(--gap) * 3 + var(--dot));
}
-
去掉父元素輔助線條，就完成啦~
image.png
3.實現(xiàn)代碼
<style>
:root {
--bg: #fff;
--dot: 20px;
--w: 300px;
--gap: 45px;
}
.container {
width: var(--w);
height: calc(var(--gap) * 3 + var(--dot));
position: relative;
}
.line {
position: absolute;
--width: calc(var(--w) - var(--gap) * 2 * var(--i));
width: var(--width);
height: var(--width);
/* 水平居中 */
left: calc(50% - var(--width) / 2);
/* 距離頂部的距離，根據(jù)gap來定 */
top: calc(var(--gap) * var(--i));
border-radius: 50%;
background: conic-gradient(var(--bg) 35%, transparent 35%);
-webkit-mask: radial-gradient(
transparent calc(var(--width) / 2 - var(--dot) - 1px),
#000 calc(var(--width) / 2 - var(--dot))
);
transform: rotate(-60deg);
}
.line::before,
.line::after {
content: "";
position: absolute;
width: var(--dot);
height: var(--dot);
border-radius: 50%;
left: calc(var(--width) / 2 - var(--dot) / 2);
top: calc(var(--width) / 2 - var(--dot) / 2);
background: var(--bg);
}
.line::before {
transform: translate(0, calc(var(--dot) / 2 - var(--width) / 2));
}
.line::after {
transform: rotate(calc(360deg * 0.35))
translate(0, calc(var(--dot) / 2 - var(--width) / 2));
}
.dot {
position: absolute;
width: var(--dot);
height: var(--dot);
border-radius: 50%;
top: calc(var(--gap) * 3);
background: var(--bg);
left: calc(50% - var(--dot) / 2);
}
</style>
<body>
<div class="container">
<div class="line" style="--i: 0"></div>
<div class="line" style="--i: 1"></div>
<div class="line" style="--i: 2"></div>
<div class="dot"></div>
</div>
</body>
