工作中提高效率的CSS3实战总结（附源码）
时间：2023-03-16 01:35:17
科技观察
本文是笔者上一篇利用CSS3实现惊艳面试官背景即背景动画（进阶附源码）的续篇，也是我最后一篇介绍CSS3技巧的文章，因为css的知识难度并不大，更多的是熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是总结自己工作中的一些css高级技巧，另一方面希望能教给大家一些实用的css开发技巧和高效的方法，提高工作效率。我们将学习box-shadow的高级应用制作自适应椭圆和纯css3实现饼图进度动画。使用border实现对话框样式css3滤镜的简单应用。CSS3伪元素实现自定义复选框。正文1.box-shadow的高级应用可以帮助我们利用css3的新特性实现各种意想不到的特效。在接下来的几个案例中，我们将使用css3的box-shdow来实现。让我们现在开始！实现水波动画的知识点：box-shadow想一想如果不使用css3我们如何实现水波扩散的动画呢？想必我们必须写很多js才能实现如下效果：css3实现核心代码
我们在这里主要是利用box-shadow的多级阴影来实现。在动画部分，我们使用@keyframes。感觉还好吗？实现加载动画知识点：box-shadow多阴影加载动画，大家也必须不陌生，虽然加载动画可以有很多种实现方式，比如用伪元素，用gif，用js，但是我觉得更优雅的实现是直接上css：核心代码如下：
我们这里也是用box-shadow多背景来实现的，这也是我当时的一个方向当时在想。至于其他的css解决方案，欢迎大家和我交流实现对话框和对话框的不规则投影知识点：过滤器和伪元素这个涉及到css过滤器的知识，但是也很简单。看css3官网就可以理解了。直接看效果：我们会通过滤镜的drop-shadow来实现不规则图形的阴影，然后通过伪元素和border来实现头部三角形：
哎呀朱先森 复制代码哎呀，朱先森复制代码模糊效果知识点：filter这个比较简单，我这里直接上传图片和代码：filter:blur(20px)2.自适应椭圆border-radius的出现，提供了极大的方便我们来实现圆角效果。我们还可以利用进一步研究Border-radius特性来实现各种图形效果，让我们见识一下它的威力吧！知识点：border-radius:a/b;//a,b分别是圆角的水平和垂直半径，如果单位是%，表示相对于宽高分析核心代码：
/div> 