Keyframes可控制小黄人抛球、上下跳动
开发工具与关键技术：vs、Keyframes
作者：张赵敏
撰写时间：2019/2/11
在前端开发中，我们也结束过很多东西。从一些基本开发工具使用到开始跟老师学习编程再到自己学会总结，利用学到的编辑成一个个例子；这是一总结学习的好方法，通过自己动手更能明白代码的深奥、精美之处！
前端开发离不开HTML的布局，更离不开css样式布局。比如下面小面的小黄人，运用了盒模型的原理嵌套堆叠出的大致形状，在通过css样式属性的绑定，达到效果模式。话不多说，一起看HTML布局代码及部分css代码，如下图：
在截图中可以看到HTML布局简单，主要是为了实现过渡设置。用了很i标签及span标签，他们主要作用勾画一些线条，眼睛等小部位；css样式除了一些宽高背景颜色等常用的，还有为了实现层叠而大量用到使用position定位，让元素脱离文档流；利用border-radius增加盒子色彩，改变盒子的圆角效果，造成视觉美。同样，话不多说，看图实际：
通过Keyframes{}就可以设置小黄人的运动状态，在通过animation调用Keyframes{}并且绑定运动时间以及次数；animation是复合属性，一般的写法为animatio：动画名称 动画执行时间 动画运动的函数 动画调用的次数；小黄人运动见如上截图中获取的animation调用的内容。下面的代码，首先定义好Keyframes{}，注意在vs开发工具中，使用关键帧要使用俩个@@符号“@@keyframes {}”；在DW中只需一个@符号即可。之后再相应的盒子上调用关键帧，即可使小黄人运动，代码如下截图：
此次不足很多，技术还没过关，还望各位大神提点一二，欢迎各位大神的指教。