CSS 圆锥渐变+MASK遮罩实现WIFI图标

最新推荐文章于 2024-07-25 10:59:09 发布
最新推荐文章于 2024-07-25 10:59:09 发布
阅读量1k 收藏 2
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48085286/article/details/130143166
版权

前言

👏CSS 圆锥渐变+MASK遮罩实现WIFI图标，速速来Get吧~

🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现步骤

  • 定义css变量–bg背景色，–dot弧宽度，–w父元素宽度，–gap，各弧度之间的间距
:root {
  --bg: #fff;
  --dot: 20px;
  --w: 300px;
  --gap: 45px;
}
  • 定义父元素container

在这里插入图片描述

<div class="container"></div>

.container {
	width: var(--w);
	position: relative;
	border: 1px solid red;
}
  • 父元素内添加一个子元素line

在这里插入图片描述

<div class="container">
	+ <div class="line" ></div>
</div>
  • 设置line样式为absolute定位，设置宽高为–w,圆角50%，背景设置圆锥渐变，–bg占据35%，剩下为透明色；

conic-gradient()：
CSS 函数 conic-gradient() 创建了一个由渐变组成的图像，渐变的颜色变换围绕一个中心点旋转（而不是从中心辐射）。锥形渐变的例子包括饼图和色轮 color wheels (en-US). conic-gradient() 函数的结果是 gradient 数据类型的对象，是一种特殊的 image 数据类型。

在这里插入图片描述

.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

在这里插入图片描述

.line{
 	 -webkit-mask: radial-gradient(
        transparent calc(var(--w) / 2 - var(--dot) - 1px),
        #000 calc(var(--w) / 2 - var(--dot))
      );
}
  • 为line添加前后伪元素，居于圆的正中间，宽高为dot，圆角50%，背景色为–bg；

在这里插入图片描述

.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遮罩的存在，使得伪元素不可见，通过调试可以看到相应的位置；

在这里插入图片描述

  • 调整前伪元素的位置，使其移动到圆弧的最上方

在这里插入图片描述

.line::before {
   transform: translate(0, calc(var(--dot) / 2 - var(--w) / 2));
 }
  • 调整后伪元素的位置，使其移动到圆弧的最下方

在这里插入图片描述

.line::after {
	transform: rotate(calc(360deg * 0.35))
    translate(0, calc(var(--dot) / 2 - var(--w) / 2));
}
  • 将line元素整体旋转60deg，就得到一个完整的圆弧了

在这里插入图片描述

.line{
	transform: rotate(-60deg);
}
  • 接下来，我们实现剩余圆弧以及中间圆点
  • 再次定义两个line元素
<div class="container">
	 <div class="line" ></div>
	+ <div class="line" ></div>
	+ <div class="line" ></div>
</div>

在这里插入图片描述

  • 第三个圆环宽度

在这里插入图片描述

  • 可以得到，每个圆环的宽度为calc(var(–w) - var(–gap) * 2 * var(–i))，i为当前圆环的索引位置（从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

在这里插入图片描述

.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));
}
  • 为每个半圆环（line元素）设置top，第一个圆环为0，第二个为gap，第三个为gap*2，可得到top为 calc(var(–gap) * var(–i))，并水平居中

在这里插入图片描述

.line{
	/* 水平居中 */
	left: calc(50% - var(--width) / 2);
	/* 距离顶部的距离，根据gap来定 */
	top: calc(var(--gap) * var(--i));
}
  • 父元素内添加dot元素，宽高为dot，背景色为–bg，圆角50%，水平居中，top为第一个圆环的位置即为calc(var(–gap) * 3)

在这里插入图片描述

<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))

在这里插入图片描述
在这里插入图片描述

.container {
	+ height: calc(var(--gap) * 3 + var(--dot));
}
  • 去掉父元素辅助线条，就完成啦~

在这里插入图片描述

3.实现代码

<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>

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~
苏苏哇哈哈
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
css3实现wifi信号逐渐增强效果实例
09-24
本篇文章主要介绍了css3实现wifi信号逐渐增强效果实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解css3 mask遮罩实现一些特效
09-22
CSS3的Mask（遮罩）特性允许我们使用透明图片或渐变来隐藏或显示元素的部分内容，创造出丰富的视觉效果。这个特性在Web设计中尤其有用，因为它提供了比传统背景更精细的控制，允许设计师实现复杂的图像处理效果。...
css属性mask遮罩
bingmoujs的博客
05-30 310
可以设置 alpha（默认）表示使用遮罩图像的 alpha 通道，或者 luminance 表示使用遮罩图像的亮度。可以设置 repeat（默认）、no-repeat、repeat-x、repeat-y 等。: 定义遮罩的起始位置。可以设置 border-box（默认）、padding-box 或 content-box。: 定义遮罩的位置。可以设置具体的水平和垂直定位值，也可以使用关键字 center 居中对齐。可以设置具体的宽度和高度值，也可以使用关键字 auto 自动缩放。: 定义要用作遮罩的图像。
css锥形渐变结合SVG实现环形进度条
qq_45465998的博客
04-12 459
锥形渐变mask(遮罩)mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。SVG使用这里自定义SVG是为了做进度条的圆弧效果，如果不要圆弧效果通过只通过锥形渐变加遮罩也能实现环形进度，结合svg后改变变量stroke-linecap的值两种效果都可以实现。
mask属性是css3的吗_CSS3 mask + 渐变，五毛特效也很炸裂的哟
weixin_42306054的博客
01-12 323
前言顾名思义，mask意思是遮罩。在CSS中，mask属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。其实mask的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景，实现五毛钱特效。我们的原则是，代码能实现的，一定不借助图片。由于Chrome浏览器只支持带前缀的写法，本文也都带上前缀，...
【CSS遮罩可视化编辑器】mask-image，边拖拽边看效果，直观易懂，图片合成，渐变背景蒙版，易如反掌
weixin_52095264的博客
07-12 1679
所谓遮罩（mask-image），就是原始图片只显示遮罩图片非透明的部分，在PS中称为“蒙版”。类似于现实世界中一张A4卡纸剪了个洞，我们可以通过洞看卡纸后面的物体，这里卡纸相当于遮罩层，只不过洞是遮罩层不透明的部分，其他部分是遮罩层透明的部分，与我们想象中的正好相反。上面提到的图片也可以是各种渐变背景色。整个过程在众触应用平台进行，不用手写一行CSS代码。...
探索CSS属性*-gradient的实用价值
flying meng的菜鸟居
09-24 1896
先介绍一下一个有趣的属性 —— conic-gradient ：圆锥渐变！ 对其感兴趣是因为我发现它竟然可以用来做圆饼图！ 比如这样的： 这样的： 其原理也很简单：就是以起始点为中心，然后以顺时针方向绕中心实现渐变效果。其必须接收多种颜色值参数，每个颜色值后可以跟两个百分比，为当前颜色值的起始点和终止点（中间用空格隔开）： background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%); 还可以分开来写： background:
CSS的常用技巧，等待动画效果(附demo的效果实现与源码）
weixin_36106791的博客
08-05 1895
前言 本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其他
CSS绚丽动画效果--贼好玩也常用
05-06 1209
有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（`delay`）这一属性。 举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其他元素以此类推，这样它们就会错开来，形成一种独特的视觉效果。
css3 属性笔记(一)
QDzzzhy
05-11 310
conic-gradient() 圆锥渐变,参数中指定渐变的颜色 用法: background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604); 效果(这里通过border-radius将其变为了圆形) radial-gradien...
2022-02-21 -webkit-mask conic-gradient 结合使用制作圆环
weixin_44845483的博客
02-21 611
conic-gradient 圆锥渐变 linear-gradient : 线性渐变 radial-gradient : 径向渐变 linear-gradient 线性渐变的方向是一条直线，可以是任何角度 radial-gradient 径向渐变是从圆心点以椭圆形状向外扩散 而从方向上来说，圆锥渐变的方向是这样的： 起始点是图形中心，然后以顺时针方向绕中心实现渐变效果 试验一下： .ring { width: 70 * $remh; height: 70 * $re
CSS3 mask 遮罩的具体使用方法
09-24
在CSS3中，`mask`属性提供了一种强大的机制，允许开发者通过定义遮罩图像来隐藏或显示元素的一部分。这个特性对于创建动态效果、复杂的图形设计以及交互式用户体验非常有用。接下来，我们将深入探讨`mask`属性的各个...
卫班科技---HTML+CSS遮罩层实现案例
02-18
本案例由卫班科技提供，展示了如何使用HTML5和CSS3来实现一个遮罩层功能，这是一个在网页中常见且实用的设计元素。遮罩层通常用于弹出窗口、提示信息或者加载动画，它能在不影响页面主要内容的情况下，向用户展示...
利用js+css简单实现半透明遮罩弹窗
09-25
在网页设计中，有时我们需要创建一个遮罩层来呈现弹窗效果，比如显示警告、确认信息或者用户表单。在给定的标题和描述中，我们看到了一个...总的来说，对于简单的应用，这个纯JS+CSS的解决方案是一个高效且实用的选择。
100 个鲜为人知的 CSS 技巧汇总整理合集
abc8002117034的博客
04-28 1057
font-feature-settings 允许您启用或禁用字体中的 OpenType 功能，例如，连字、字距调整和样式替代。text-decoration-style 指定用于文本装饰的线条样式，允许您选择不同的线条样式，例如实线、双线、点线或虚线。text-decoration-skip-ink 控制文本装饰是否应跳过上升部分和下降部分，从而改善下划线和穿线的外观。text-align-last 确定块元素中最后一行文本的对齐方式，从而提供对多行块中文本对齐的精确控制。使用字体显示：交换；
CSS学习笔记
ngczx的博客
07-23 649
CSS学习笔记
css in js 相比较 css modules 有什么好处？
最新发布
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 376
CSS-in-JS 和 CSS Modules 都是用于管理 React 组件样式的流行方案，它们各有优势。动态样式：CSS-in-JS 可以轻松创建基于 props 或状态的动态样式，更灵活地处理复杂的样式逻辑。无需额外的构建配置：大多数 CSS-in-JS 解决方案可以直接使用，不需要额外的 webpack 配置。无需命名约定：CSS-in-JS 自动生成唯一的类名，避免了命名冲突，不需要遵循特定的命名规范。运行时优化：一些 CSS-in-JS 库支持运行时的样式优化，只加载当前渲染所需的样式。
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 811
【代码】[css3] 如何设置边框颜色渐变。
css+js原生实现动画遮罩
07-08
要实现动画遮罩效果，可以使用CSS和JavaScript原生实现。下面是一种实现方式： HTML结构： ```html <!-- 内容 --> <div class="overlay"></div> ``` CSS样式： ```css .container { position: relative; ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值