css 锥形渐变实现仪表盘

仪表盘的形状实现:都是圆,未渐变染色的区域都是白色,和背景白色相同,产生形状

效果图:

代码示例:

//背景白色
body {background: #fff;
}/* 最外围边框 */
.bg {position: relative;margin: 50px auto;width: 400px;height: 400px;border-radius: 50%;background: conic-gradient(#f1462c 0%,#fc5d2c 12.4%,#fff 12.5%,#fff 12.5%,#fc5d2c 12.5%,#fba73e 24.9%,#fff 24.9%,#fff 25%,#fba73e 25%,#e0fa4e 37.4%,#fff 37.4%,#fff 37.5%,#e0fa4e 37.5%,#12dd7e 49.9%,#fff 49.9%,#fff 50%,#12dd7e 50%,#0a6e3f 62.4%,#fff 62.4%,#fff 62.5%);transform: rotate(-112.5deg);transform-origin: 50% 50%;
}/* 外围和中间仪表的间隔白色,实际就是一个白色圆 */
.bg::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 370px;height: 370px;border-radius: 50%;background: #fff;
}//内部仪表盘
.bg::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 320px;height: 320px;border-radius: 50%;/*径向渐变:内部仪表盘中间白色的区域  */background: radial-gradient(#fff 0%,#fff 25%,transparent 25%,transparent 100%),conic-gradient(#f1462c 0 12.5%,#fba73e 0 25%,#e0fa4e 0 37.5%,#12dd7e 0 50%,#0a6e3f 0 62.5%,#fff 0 100%);
}/* 指针圆 */
.point {position: absolute;width: 30px;height: 30px;transform: translate(-50%, -50%);left: 50%;top: 50%;background: radial-gradient(#467dc6 0%, #a4c6f3 100%);border-radius: 50%;z-index: 999;
}
/* 指针针 */
.point::before {content: "";position: absolute;width: 5px;height: 350px;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(0);border-radius: 100% 100% 5% 5%;background: linear-gradient(180deg,#9bc7f6 0,#467dc6 50%,transparent 50%,transparent 100%);animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
}@keyframes rotate {50% {transform: translate(-50%, -50%) rotate(150deg);}100% {transform: translate(-50%, -50%) rotate(150deg);}
}<div class="bg"><div class="point"></div>
</div>

css 锥形渐变实现仪表盘相关推荐

CSS锥形渐变实现环形进度条
10月份因为疫情原因.又开启了居家办公模式,空闲之余,与其选择"躺平",不如去做一些有意义的事情,内心的想法驱使着我去做些什么,但是又没有合适的素材,直到接手了最近的一个可视化项目 ...
css锥形渐变结合SVG实现环形进度条
css锥形渐变结合SVG实现环形进度条准备: 锥形渐变 MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gra ...
android 锥形进度条,canvas锥形渐变进度条
从一个渐变圆角进度条浅出画一个圆开始这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
canvas实现锥形渐变
canvas实现锥形渐变感谢大神LeaVerou 原本css中有个background:conic-gradient 可以实现,但是兼容性极差,我原本在项目中使用了,在电脑测试没有问题,效果出来了, ...
Qt 渐变（六）: 锥形渐变的使用
文章目录前言一.锥形渐变是什么? 二.示例代码总结前言在Qt中锥形渐变属于是最简单的渐变.只需要定义一个中心点,和一个其实角度,按照逆时针方向进行渐变,而且没有spread设置一.锥形渐变 ...
css背景渐变的技巧与方法
[发帖际遇]: the_truth玩宠物的时候不幸损失威望13. css背景渐变的技巧与方法用css实现网页背景渐变的代码如下: 一.从上往下渐变 Example Source Code: body ...
html css双色径向渐变,CSS 径向渐变
CSS 径向渐变 CSS 径向渐变 A radial gradient is defined by its center. To create a radial gradient you must a ...
前端技术分享：锥形渐变conic-gradient你了解多少？
渐变效果在开发中我们可能会经常使用到,像什么线性渐变linear-gradient啦,还有径向渐变radial-gradient,但今天我们讲的是锥形渐变conic-gradient. 当然,我们这次 ...
css 背景色渐变 background linear-gradient
css 背景色渐变 background linear-gradient background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0 ...

css 锥形渐变实现仪表盘

css 锥形渐变实现仪表盘相关推荐

最新文章

热门文章