css实现人走路效果,纯css实现机器人走路动画

纯css实现机器人走路动画

由于发现了css的这个现象

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

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

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

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

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

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

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

效果图展示

walk.gif

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

完整源代码

一个机器人走路动画

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* 头部动画 */

@keyframes head {

/*transform: translateY(-80px);*/

25% {

transform: translateY(-5px) translateX(-5px);

}

50% {

transform: translateY(-0px) translateX(0);

}

75% {

transform: translateY(-5px) translateX(5px);

}

}

/* 眼部闪光动画 */

@keyframes eyeAni {

25% {

box-shadow: black 0 0 20px;

background-color: blue;

}

50% {

}

75% {

box-shadow: black 0 0 20px;

background-color: red;

}

}

/* 身体上下动画 */

@keyframes bodyUpDown {

25% {

transform: translateY(-10px);

}

50% {

transform: translateY(0);

}

75% {

transform: translateY(-10px);

}

}

/* 大臂1动画 */

@keyframes rootArm1 {

25% {

transform: translateY(20px) rotate(0deg);

}

50% {

transform: translateY(20px) rotate(30deg);

}

75% {

transform: translateY(20px) rotate(0deg);

}

}