transtion与animation为css3新增的属性，主要用来实现一些动画效果
transtion属性向元素应用2D或3D转换，允许我们对元素进行旋转、缩放、移动或倾斜
animation动画有三个基本要素：
1、告诉系统需要执行哪个动画。
2、自己创建一个所需的动画
3、告诉系统需要执行动画的时长
例子：纯CSS3波浪加载效果
以下为效果代码
纯CSS3波浪加载效果 50%
思路分析，我们要实现一个有波浪的加载效果，首先需要制作曲线，再让曲线以波浪的形式滚动起来。曲线可以通过canvas制作，但是那样相对较复杂，在这里我们通过border-radius的方式取巧制作。
但是得到的类圆形的曲线，如图黄色内部的曲线才是我们想要的
在得到波浪后，将放大的类圆形背景色改为与白色。再新建一个同样的类圆形，通过使用rgba的方式，设置一定的透明的可以形成第二层的远处波浪，增加真实感。
再来只要添加一层用来显示加载进度的div就可以了
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3549/viewspace-2814444/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
