这篇文章是上一篇文章的延续，也是我最后一篇介绍css3方法的文章css3的新特性，因为css的知识并没有那么难，更多的是熟悉css3的新特性和基础理论知识。
所以写这篇文章的目的一方面是总结自己工作中的一些中间CSS方法，另一方面希望能教给大家一些开发CSS的实用方法和高效方法，从而提高CSS开发的效率。工作效率。
我们将学习课文
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;}@keyframes load {0% {box-shadow: -40px 0 0 rgba(250, 189, 189, 0),inset 0 0 0 15px rgba(250, 189, 189, 0),40px 0 0 rgba(250, 189, 189, 0);}30% {box-shadow: -40px 0 0 rgba(250, 189, 189, 1),inset 0 0 0 15px rgba(250, 189, 189, 0),40px 0 0 rgba(250, 189, 189, 0);}60% {box-shadow: -40px 0 0 rgba(250, 189, 189, 0),inset 0 0 0 15px rgba(250, 189, 189, 1),40px 0 0 rgba(250, 189, 189, 0);}100% {box-shadow: -40px 0 0 rgba(250, 189, 189, 0),inset 0 0 0 15px rgba(250, 189, 189, 0),40px 0 0 rgba(250, 189, 189, 1);}}</style><div class="loading"></div>我们这里也使用了box-shadow多背景，这也是我当时在思考的一个方向。 至于其他的css解决方案，欢迎大家与我交流。
实现对话框以及对话框的不规则投影
知识点：过滤器和伪元素
这就涉及到css过滤器的知识了，不过也很简单。 你看css3的官网就可以理解。 我们直接看疗效：
我们将使用滤镜的投影来实现不规则图形的阴影，然后使用伪元素和边框来实现肘部三角形：
<style>.odd-shadow{margin-left: auto;margin-right: auto;width: 200px;height: 80px;border-radius: 8px;color: #fff;font-size: 24px;text-align: center;line-height: 80px;background: #06c;filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))}.odd-shadow::before{content: '';position: absolute;display: block;margin-left: -20px;transform: translateY(20px);width:0;height: 0;border: 10px solid transparent;border-right-color: #06c;}</style><div class="odd-shadow">哎呦，猪先森</div>复制代码模糊疗效
知识点：过滤器
这个比较简单，这里我直接上图和代码：
filter: blur(20px)2.制作自适应椭圆
border-radius的出现为我们实现圆角的效果提供了很大的方便。 通过进一步研究Border-radius的特性，我们还可以实现各种图形效果。 接下来就让我们看看它的威力吧！
知识点：border-radius: a / b;//a,b分别是圆角的水平和垂直直径。 如果单位是%，则表示是相对于长度和高度来分析的
核心代码：
<style>.br-1{width: 200px;height: 100px;border-radius: 50% /10%;background: linear-gradient(45deg,#06f,#f6c,#06c);}.br-2{width: 100px;border-radius: 20% 50%;}.ani{animation: skew 4s infinite;}.ani1{animation: skew1 4s infinite 2s;}.ani2{animation: skew2 4s infinite 3s;}@keyframes skew{to{border-radius: 50%;}}@keyframes skew1{to{border-radius: 20px 20px 100%;}}@keyframes skew2{to{transform: rotate(360deg);}}</style><div class="br-1 black-theme"></div><div class="br-1 black-theme ani"></div><div class="br-1 black-theme ani1"></div><div class="br-1 br-2 black-theme ani2"></div>这里我们主要使用背景渐变来实现华丽的背景，并使用border-radius来实现各种大小的椭圆形图案。
3.纯css3实现饼图进度动画
知识点：border-radius：abcd/efgh； 动画有多种动画属性；
效果如下：
核心代码：
<style>.br-31{width: 100px;height: 100px;border-radius: 50%;background: linear-gradient(to right,#f6c 50%,#333 0);}.br-31::before{content: '';display: block;margin-left: 50%;height: 100%;border-radius: 0 100% 100% 0 / 50%;background-color: #f6c;transform-origin: left;animation: skin 4s linear infinite,bg 8s step-end infinite;}@keyframes skin{to{transform: rotate(.5turn);}}@keyframes bg{50%{background: #333;}}.br-32::before{animation-play-state: paused;animation-delay: inherit;}</style><div class="br-31 black-theme"></div><div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>复制代码这部分的实现我们主要使用渐变背景，这也是实现扇形进度的关键，包括代码中如何覆盖半圆，如何对半圆进行动画处理，如何改变原点的位置旋转等等，这些其实都是很技巧的，不过我们稍微介绍一下，也可以通过画图来实现。
4. css3伪元素实现自定义复选框
我们都知道，原生的复选框控件样式定制难度极大，这大大增加了工程师实现设计稿的难度。 css3的出现增加了:checked选择器，所以我们可以使用:checked和label来实现各种表单选择控件。 接下来我们就来看看如何实现吧！
让我们看看如何实现上面的自定义复选框：
<style>.check-wrap{text-align: center;}.checkbox{position: absolute;clip: rect(0,0,0,0);}.checkbox[type="checkbox"]:focus + label::before{box-shadow: 0 0 .6em #06c;}.checkbox[type="checkbox"] + label::before{content: 'a0'; /* 不换行空格 */display: inline-block;margin-right: .3em;width: 2em;height: 2em;border-radius: .3em;vertical-align: middle;line-height: 2em; /* 关键 */font-size: 20px;text-align: center;color: #fff;background: gray;}.checkbox[type="checkbox"]:checked + label::before{content: '2713'; /* 对勾 */background: black;}label{margin-right: 40px;font-size: 20px;}</style><div class="check-wrap"><input type="checkbox" class="checkbox" id="check-1" /><label for="check-1">生男孩</label><input type="checkbox" class="checkbox" id="check-2" /><label for="check-2">生女孩</label></div>这里为了隐藏原来的checkbox控件，我们使用clip: rect(0,0,0,0)进行拦截，然后使用checkbox伪类:checked来实现交互。
接下来我们扩展一下，我们来实现一个自定义开关：
这里原理是一样的，只是样式变了，直接上传代码：
<style>.check-wrap{margin-bottom: 20px;text-align: center;}.switch{position: absolute;clip: rect(0,0,0,0);}.switch[type="checkbox"] + label{width: 6em;height: 3em;padding: .3em;border-radius: .3em;border: 1px solid rgba(0,0,0,.2);vertical-align: middle;line-height: 2em; /* 关键 */font-size: 20px;text-align: center;color: #fff;box-shadow: 0 1px white inset;background-color: #ccc;background-image: linear-gradient(#ddd,#bbb);}.switch[type="checkbox"]:checked + label{box-shadow: 0.05em .1em .2em rgba(0,0,0,.6) inset;border-color: rgba(0,0,0,.3);background: #bbb;}label{margin-right: 40px;font-size: 14px;}.switch-an{position: absolute;clip: rect(0,0,0,0);}.switch-an[type="checkbox"] + label{position: relative;display: inline-block;width: 5em;height: 2em;border-radius: 1em;color: #fff;background: #06c;text-align: left;}.switch-an[type="checkbox"] + label::before{content: '';width:2em;height: 2em;position: absolute;left: 0;border-radius: 100%;vertical-align: middle;background-color: #fff;transition: left .3s;}.switch-an[type="checkbox"] + label::after{content: 'OFF';margin-left: 2.6em;}.switch-an[type="checkbox"]:checked + label::before{transition: left .3s;left: 3em;}.switch-an[type="checkbox"]:checked + label::after{content: 'NO';margin-left: .6em;}</style><div class="check-wrap"><input type="checkbox" class="switch" id="switch-1" /><label for="switch-1">生男孩</label><input type="checkbox" class="switch" id="switch-2" /><label for="switch-2">生女孩</label></div><div class="check-wrap"><input type="checkbox" class="switch-an" id="switch-an-1" /><label for="switch-an-1"></label></div>你认为css3提供了更强大的动画和自定义功能吗？ 事实上css3的新特性，我们还可以达到更酷更实用的疗效，等待你去尝试。
5.一款在线制作css3动画的神器
最后推荐一款在线制作各种贝塞尔曲线的工具，我做动画时经常使用：
三次贝塞尔曲线。
地址：#.17,.67,.83,.67
终于
作者将在2天内推出一个开源CMS系统，技术框架：
稍后将介绍系统的设计思想、架构和实现过程。 欢迎关注公众号“趣聊前端”查看更详细的介绍。
另外我们还建立了趣聊前端社区
欢迎您与来自不同公司的后端开发人员交流讨论后端开发场景、前端日常工作中遇到的问题及解决方案、后端职业发展的讲解。
欢迎大家互相学习，共同探索后端的边界。
本文介绍和总结CSS3（Transform）的新特性，主要内容包括总结CSS3（Transform）的新特性，旋转：，缩放：，倾斜：，平移：，总结：css3新特性，基本概念，基本应用，原理以及机制、注意事项等，并结合实例来分析其用法，希望本文能帮助您理解应用的内容。
总结一下CSS3新特性（Transform）的概述：
CSS3新添加的Transform可以改变可视区域中元素的坐标（这种改变不会引起文档的重新排列，只是重新排列），以及形状和一些3D变形。 与Animation结合（这里会有链接）可以拉风的动画；
旋转：
旋转支持一个参数，角度值0-360deg
#demo{ transform: rotate(180deg);/*实现旋转,左上角的东西会在右下角显示*/ }缩放（比例）：
scale 支持两个参数（x，y）。 如果y不填，则取x的值； 1为正常，1为放大；
#demo{ transform: scale(1.2);/*放大1.2倍*/ transform: scale(.8);/*缩小为正常的0.8倍*/ }scale提供了两个子方法scaleX和scaleY，分别用于设置x或y的缩放比例；
倾斜（歪斜）：
skew支持两个参数(x,y)，参数类型为角度(deg)，如果不填y则默认为0(与zoom不同)；
#demo{ transform:skew(45deg);/*文本沿x轴向左倾斜45°*/ transform:skew(0,45deg);/*文本沿y轴向下倾斜45°*/ }如果只设置x或y，可以直接使用skewX和skewY两个子方法；
翻译（翻译）：
translate 接收两个参数 (x, y) 作为平移距离。 如果不填写y值，则默认为0，并且支持CSS中所有有效的厚度单位（使用translate连接元素不会触发重排，只会重绘）；
#demo{ transform:translate(20px,5vh);/*向左移动二十像素,向下移动百分之五的视窗高度*/ }还有两个子方法css3新特性，translateX、translateY；
做了一个简单的小反例，使用rotate；
总结：
用Transform可以做很多很酷的事情，（跳过matrix，matrix3d没说……）当然，别像我一样死了
相关参考文档：
MDN 的转变
通过 w3school 进行改造
W3文档
发表评论