在前端开发中,我们也结束过很多东西。从一些基本开发工具使用到开始跟老师学习编程再到自己学会总结,利用学到的编辑成一个个例子;这是一总结学习的好方法,通过自己动手更能明白代码的深奥、精美之处!
前端开发离不开HTML的布局,更离不开css样式布局。比如下面小面的小黄人,运用了盒模型的原理嵌套堆叠出的大致形状,在通过css样式属性的绑定,达到效果模式。话不多说,一起看HTML布局代码及部分css代码,如下图:
在截图中可以看到HTML布局简单,主要是为了实现过渡设置。用了很i标签及span标签,他们主要作用勾画一些线条,眼睛等小部位;css样式除了一些宽高背景颜色等常用的,还有为了实现层叠而大量用到使用position定位,让元素脱离文档流;利用border-radius增加盒子色彩,改变盒子的圆角效果,造成视觉美。同样,话不多说,看图实际:
通过Keyframes{}就可以设置小黄人的运动状态,在通过animation调用Keyframes{}并且绑定运动时间以及次数;animation是复合属性,一般的写法为animatio:动画名称 动画执行时间 动画运动的函数 动画调用的次数;小黄人运动见如上截图中获取的animation调用的内容。下面的代码,首先定义好Keyframes{},注意
Keyframes可控制小黄人抛球、上下跳动
最新推荐文章于 2023-07-25 16:33:00 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)