Keyframes可控制小黄人抛球、上下跳动

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中只需一个@符号即可。之后再相应的盒子上调用关键帧,即可使小黄人运动,代码如下截图:在这里插入图片描述
此次不足很多,技术还没过关,还望各位大神提点一二,欢迎各位大神的指教。

猜你喜欢

转载自blog.csdn.net/weixin_44519188/article/details/87038985
0条评论
添加一条新回复