前言
??CSS 圓錐漸變+MASK遮罩實現(xiàn)WIFI圖標株婴，速速來Get吧~
??文末分享源代碼。記得點贊+關注+收藏！
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;
}
- 父元素內添加一個子元素line
image.png
<div class="container">
+ <div class="line" ></div>
</div>
- 設置line樣式為absolute定位，設置寬高為--w,圓角50%衩辟，背景設置圓錐漸變螟炫，--bg占據35%，剩下為透明色艺晴；
conic-gradient()：
CSS 函數(shù) conic-gradient() 創(chuàng)建了一個由漸變組成的圖像昼钻，漸變的顏色變換圍繞一個中心點旋轉（而不是從中心輻射）。錐形漸變的例子包括餅圖和色輪 color wheels (en-US). conic-gradient() 函數(shù)的結果是 gradient 數(shù)據類型的對象封寞，是一種特殊的 image 數(shù)據類型然评。
image.png
.line{
position: absolute;
width: var(--w);
height: var(--w);
border-radius: 50%;
background: conic-gradient(var(--bg) 35%, transparent 35%);
}
- 為line設置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遮罩的存在，使得偽元素不可見纳像，通過調試可以看到相應的位置魂莫；
image.png
- 調整前偽元素的位置，使其移動到圓弧的最上方
image.png
.line::before {
transform: translate(0, calc(var(--dot) / 2 - var(--w) / 2));
}
- 調整后偽元素的位置爹耗，使其移動到圓弧的最下方
image.png
.line::after {
transform: rotate(calc(360deg * 0.35))
translate(0, calc(var(--dot) / 2 - var(--w) / 2));
}
- 將line元素整體旋轉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>
- 根據gap潭兽，動態(tài)修改圓弧的寬度倦始，并設置定位，可以參考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為當前圓環(huán)的索引位置（從0開始账蓉，依次+1）
- 為line元素設置行內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元素的寬高枚碗，將相關的--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元素）設置top，第一個圓環(huán)為0铸本，第二個為gap肮雨，第三個為gap*2，可得到top為 calc(var(–gap) * var(–i))箱玷，并水平居中
image.png
.line{
/* 水平居中 */
left: calc(50% - var(--width) / 2);
/* 距離頂部的距離怨规，根據gap來定 */
top: calc(var(--gap) * var(--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);
}
- 設置父元素的高度為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);
/* 距離頂部的距離，根據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>
