css单选radio按钮样式css多选框checkbox样式css响应式汉堡菜单(左滑、抽屉)css实现遮罩层弹出效果一组好看的css按钮效果(6种)css实现select下拉选择框css实现选项卡功能css实现下拉菜单css按钮样式代码(16种)css实现手风琴效果css图片轮播效果css进度条样式css实现侧边栏菜单css加载动画css背景动画效果css开关按钮样式(18种)css炫酷的圆形菜单css提示tooltip效果css手风琴_好看的Gallery伸缩效果css表格样式css分段控件导航栏css折角效果css粒子背景动画效果css进度圆圈连线css响应式分页样式代码css各种天气样式动画图标css层叠卡片滑出特效css下拉Dropdown菜单css圆圈按钮tip提示特效css和svg圆圈进度样式代码css动画404页面代码css爱心跳动动画代码css绘制逼真玻璃球效果css模拟开关灯特效创意css网格布局带动画效果css星级打分radio五角星css卡片悬浮翻转特效div上下浮动纯css动画css时间轴样式（timeLine）css文字循环翻滚动画效果css输入框动效css鼠标悬停缩放比例效果css模糊背景毛玻璃效果css实现小球循环跳动动画css实现标签样式Tagscss进度条阴影动画css绘制的小鸟css svg按钮冒泡动画特效css svg蓝色波浪动画特效css创意svg菜单栏水滴动画css文字进度条的实现CSS实现内容折叠/展开效果CSS3手机充电特效css实现鼠标点击拖拽效果CSS实现一个计时器纯CSS渐变绘制 Chrome 图标CSS 渐变来实现波浪动画
纯CSS渐变绘制 Chrome 图标
源码如下
<div class="chrome"></div>
<style>
.chrome{
width: 200px;
height: 200px;
border-radius: 50%;
--size: 45%;
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff calc(100% - 9.5px) 100%, transparent calc(100% + .5px)) center/var(--size) no-repeat,
conic-gradient( #F2C146 90deg, transparent 0) 50% 50%/ 100% var(--size) no-repeat,
conic-gradient(from 330deg at calc( 50% - calc(var(--size) / 2) * 0.866 ) calc( 50% + calc(var(--size) / 2) * .5 ), #D75442 100deg, transparent 0),
conic-gradient(from 210deg at calc( 50% + calc(var(--size) / 2) * 0.866 ) calc( 50% + calc(var(--size) / 2) * .5 ), #539E55 100deg, transparent 0),
#F2C146
}
</style>总结
通过 css 渐变绘制出一个 Chrome 图标的全部过程了，没有用到任何额外标签（包括伪元素），再次感叹 CSS 渐变的强大。下面总结一下
- 复杂的图形需要通过拆分转换成熟悉的形状
- 径向渐变中的closest-side，表示最近的边，可以根据背景尺寸直接控制圆的大小
- 多背景的情况下，前面的背景层级 > 后面的背景层级
- 以前旋转的矩形只能通过 CSS transform才能实现，现在可以借助锥形渐变来实现
- CSS 三角函数可以很方便的计算角度和位置的关系
来源：https://segmentfault.com/a/1190000043759845