如何用 CSS 制作动画圆环图形图标
英文 | https://medium.com/weekly-webtips/how-to-make-a-doughnut-chart-icon-with-css-72924fbeef47
翻译 | 杨小二
CSS 边框一直以来被认为是一种特殊属性,可以创造性地使用它来创建各种 UI 元素,除了边框——比如笔画、V 形或箭头。
在本文中,我们将看看如何使用它来创建一个有边框的动画圆环图图标,它的最终效果如下所示:
用 CSS 边框创建甜甜圈
首先,让我们创建一个只有一种颜色的甜甜圈。为此,我设置了以下规则,在屏幕中创建一个带有红色边框的 50x50px 黑色矩形。
.doughnut {
background: #000;
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid red;
}
然而,正如你所看到的,这看起来并不像一个甜甜圈。为了解决这个问题,并创建一个笔触,添加一个具有透明背景的 100% 边框半径:
.doughnut {...border-radius: 100%;
}
将段添加到甜甜圈
要添加不同的段,你可以使用单独的规则更改边框每一侧的颜色:
.doughnut {...border: 10px solid #FF6188;border-top: 10px solid #A9DC62;border-left: 10px solid #78DCDC;border-right: 10px solid #FFD862;
}
玩转段和旋转
为了使效果漂亮,你还可以添加一点旋转动画。通过添加一点动画,你还可以将其变成圆形加载指示器:
@keyframes loading {0% { transform: translate(-50%, -50%) rotate(25deg); }100% { transform: translate(-50%, -50%) rotate(385deg); }
}
.doughnut {
transform: translate(-50%, -50%) rotate(25deg);
/* Add animation if you want to turn it into a loading indicator */
animation: loading 1s ease-in-out infinite;
}
效果如下:
你还可以通过简单地将相邻边框设为相同颜色来创建更大的段:
.doughnut-01 {
/* default values */
}
.doughnut-02 {
border-left: 10px solid #78DCDC;
border-bottom: 10px solid #78DCDC;
}
.doughnut-03 {
border-left: 10px solid #FF6188;
border-right: 10px solid #FF6188;
}
效果如下:
使用不同的边框样式
你还可以使用 border-style 属性来创建不同风格的甜甜圈。 一些例子是:
.doughnut-01 { border-style: dotted; }
.doughnut-02 { border-style: double; }
.doughnut-03 { border-style: groove; }
.doughnut-04 { border-style: ridge; }
效果如下:
把所有东西放在一起
最后,你还可以使用框阴影为其添加额外的边框。 你可以根据需要添加任意数量的 box-shadow,你只需要用逗号分隔不同的值。
.doughnut {
box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;
}
将所有内容放在一起,这是构成元素的最后一组规则:
.doughnut {
display: block;
border-radius: 100%;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(25deg);
border: 10px solid #FF6188;
border-top: 10px solid #A9DC62;
border-left: 10px solid #78DCDC;
border-right: 10px solid #FFD862;
box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;
}
总结
总之,CSS 边框可以以各种创造性的方式使用。 如你所见,即使你已经用完给定元素的边框属性,你仍然可以使用 box-shadow 在其上添加额外的边框。
为了使这个图标更加可定制,它也可以替换为 SVG 路径。
你是否已经以创造性的方式使用过 CSS 边框? 请在留言区中告诉我! 感谢你的阅读,快乐编程!
学习更多技能
请点击下方公众号
如何用 CSS 制作动画圆环图形图标相关推荐
- html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?(代码实例)
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
- 如何用python制作动画_如何基于Python Matplotlib实现网格动画
-1- 如果你对本文的代码感兴趣,可以去 Github (文末提供)里查看.第一次运行的时候会报一个错误(还没找到解决办法),不过只要再运行一次就正常了. 这篇文章虽然不是篇典型的数据科学类文章,不过 ...
- css怎么制作自己头像跳跃,如何用CSS制作闪烁的箭头
如何用CSS制作闪烁的箭头 阅读:9441 次 编辑日期:2016-03-21 目录: 概述: 随着移动端的普及,CSS3的动画效果用的越来越多,甚至很多时候PC端也在用,因为可以省去繁杂的JS, ...
- 双环形图表_(双圆环图表)如何用excel制作多层圆环对比图
excel的环形图怎么做? 1.,有以下,品1-51-4月的销量情况. 2.选定数据后,通过以下路径插入图:顶端功能区--插入--图表--饼图--圆环图, 3.选定图表后,在"设计" ...
- css加号图标_纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
- 如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页 产品介绍 服 ...
- 如何用java制作动画_如何制作动画(java实现动画的代码)
如何制作动画(java实现动画的代码)内容如下 回答一:AE用于制作mg动画,操作确实有些复杂,技术要求也高,但不得不承认它是个神器,可以创建各种吸引人的动态图形和视觉效果 当然,现在网上也有一些比较 ...
- 利用CSS制作一些实用的图标
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- web前端入门到实战:纯css制作电闪雷鸣的天气图标
效果 效果图如下 实现思路 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的 ...
最新文章
- 电脑机时,电脑死机时,为啥会忍不住扇它一巴掌?
- OC 的反射机制以及使用场景
- 如何解决 “ 段错误(吐核) ” ???
- 怎样在Web开发中完美控制IE标题栏
- Acwing第 29 场周赛【完结】
- BZOJ4974 字符串大师(kmp)
- python3数据类型:List列表
- 【Alpha】第二次Scrum meeting
- java 控制语句、数组、方法
- QTP11恢复30天试用破解
- C#三层架构第五课之DBUtil层设计
- Java编写程序时出现警告:Resource leak: 'xxx' is never closed 解决方案
- 阿里:千亿交易背后的0故障发布
- 向模块化进军,创建类
- linux使用flock文件锁解决crontab冲突问题
- php 抓取 百度百科,百度百科词条内容爬取-爬虫大作业
- 计算机取证之Xplico ——合天网安实验室学习笔记
- 机器学习笔记—模式识别与智能计算(一)模式识别概述
- 如何解决Win10系统更新显示0x80070057代码的错误?
- 易语言单窗口单ip软件源码_易语言助手下载-易语言助手 v3.2.0701 官方版
热门文章
- 03-Tensorboard的使用 (老衲又卷土重来了!!!)
- 京东商城导航logo---用js
- 为什么高频交易被俄罗斯人垄断?
- c语言写层次分析法,基于C语言的层次分析法在医院工作质量评价中的设计与实现...
- 一个科研工作者怎么算很努力
- RT-Thread--片上 flash作 U 盘
- 天下宝藏手游 服务器维护好久,2017年5月4日服务器停机维护公告
- 百度地图api设置html5,百度地图API详解之自定义地图类型
- MATLAB-实现太阳、地球、月亮三者之间运转关系的模拟
- 【多元统计分析】12.逐步回归