纯css实现机器人走路动画

纯css实现机器人走路动画


由于发现了css的这个现象

当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动

所以我忽然想到,实现人的走路动画并不是不可能的了。

我开始搭建人体的结构,让人的每一个发生运动了的部分都设置为一个单独的盒子。

然后编辑和调整动画代码,一边站起来自己比划动作比对一边写代码。

终于,今天,大二,我实现了小学时候想用flash做出人体走路动画。

然后我开始又继续添加东西,把这个人改成了拿着剑一边挥舞一边走路的机器人。

蛮有趣的,就是代码写的比较冗长。

效果图展示

walk.gif
2021-7-15_16-35-34.png

完整源代码





    
    一个机器人走路动画
    



你可能感兴趣的:(纯css实现机器人走路动画)