css3 彩带扩散效果_css3实战汇总（附源码）

本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画（高级附源码）的续篇也是本人最后一篇介绍css3技巧的文章，因为css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。

我们将学到

• box-shadow的高级应用
• 制作自适应的椭圆
• 纯css3实现饼图进度动画
• 用border来实现一个对话框样式
• css3 filter的简单应用
• css3伪元素实现自定义复选框
• 在线制作css3动画的利器

正文

1.box-shadow的高级应用

利用css3的新特性可以帮助我们实现各种意想不到的特效，接下来的几个案例我们来使用css3的box-shdow来实现，马上开始吧！

实现水波动画

知识点：box-shadow

想想我们如果不用css3，是怎么实现水波扩散的动画呢？想必一定是写一大堆的js才能实现如下的效果：

css3实现核心代码

<style>
.wave {
    
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 2px solid #fff;
  text-align: center;
  line-height: 100px;
  color: #fff;
  background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
  background-size: 100%;
  animation: wave 4s linear infinite;
}       
@keyframes wave {
    
    0% {
    
        box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
    }
    50% {
    
        box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
    }
    100% {
    
        box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
    }
}
</style>
<div class="wave"></div>

这里我们主要使用了box-shadow的多级阴影来实现的，动画部分我们使用的@keyframes，是不是感觉还行？

实现加载动画

知识点：box-shadow多阴影

加载动画大家想必也不陌生，虽然可以用很多方式实现加载动画，比如用伪元素，用gif，用js，但是更优雅的实现我觉得还是直接上css：

核心代码如下：

<style>
.loading {
    
  margin-left: auto;
  margin-right: auto;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: transparent;
  animation: load 3s linear infinite;
}       
@ke