Css3动画实现小球满天飞

开发工具与关键技术：DW html+css3
作者：杨泽平
撰写时间：2019、1、19

一个简单的css3动画（小球满天飞），html部分我就不多讲了，主要就是写了几类不同的小球的样式，在css3动画里我用animation的动画属性 animation-name、 animation-duration、animation-timing-function、animation-direction以及animation-delay分别设置它的一些属性值，
详细代码请看截图吧（注：每一类小球有许多，在HTML代码截图只截了部分）：


因为animation动画可以将多种效果结合到一起使用，所以我在@keyframes规定动画这里我结合一起设置了动画的“translate()位移”运动路径跟“scale()缩放”运动时大小变幻以及一些颜色变化，这样它在整个运动过程中就可以同时展现出位移路径改变、缩放、颜色变幻的多种效果；下面是效果一部分截图：