css实现⼈⾛路效果，纯css实现机器⼈⾛路动画纯css实现机器⼈⾛路动画
由于发现了css的这个现象
当⼀个有元素嵌套的时候，⽗元素有动画，⼦元素也有动画，那么⼦元素的运动会相对⽗元素的运动⽽运动
所以我忽然想到，实现⼈的⾛路动画并不是不可能的了。
我开始搭建⼈体的结构，让⼈的每⼀个发⽣运动了的部分都设置为⼀个单独的盒⼦。
然后编辑和调整动画代码，⼀边站起来⾃⼰⽐划动作⽐对⼀边写代码。
终于，今天，⼤⼆，我实现了⼩学时候想⽤flash做出⼈体⾛路动画。
然后我开始⼜继续添加东西，把这个⼈改成了拿着剑⼀边挥舞⼀边⾛路的机器⼈。
蛮有趣的，就是代码写的⽐较冗长。
效果图展⽰
walk.gif
2021-7-15_16-35-34.png
完整源代码
⼀个机器⼈⾛路动画
* {
margin: 0;
padding: 0;古埃及文字翻译
box-sizing: border-box;
}
/* 头部动画 */
emperor是什么意思
@keyframes head {
/*transform: translateY(-80px);*/
25% {
transform: translateY(-5px) translateX(-5px);
}
50% {
transform: translateY(-0px) translateX(0);
}
75% {
transform: translateY(-5px) translateX(5px);
}
occupation是什么意思}
/* 眼部闪光动画 */
@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动画 */
drafted@keyframes rootArm1 {
25% {
transform: translateY(20px) rotate(0deg); }
50% {
transform: translateY(20px) rotate(30deg);
transform: translateY(20px) rotate(0deg); }
}
/* ⼤臂2动画 */
@keyframes rootArm2 {
25% {
transform: translateY(20px) rotate(0deg); }
50% {
transform: translateY(20px) rotate(-30deg); }
75% {
transform: translateY(20px) rotate(0deg); }
}
/* ⼩臂1动画 */
@keyframes subArm1 {
50% {
英孚少儿英语transform: rotate(30deg);
}
}
/* ⼩臂2动画 */
@keyframes subArm2 {
50% {
transform: rotate(0deg);
}
}
/
* ⼤腿1动画 */
@keyframes rootLegWalk1 {
/* 最开始 rotate(-5deg);*/
25% {
transform: rotate(-15deg);
transform: rotate(5deg);
}
75% {
transform: rotate(30deg);
}
}
/
* ⼩腿1动画 */
@keyframes subLegWalk1 {
/* 最开始 transform: rotate(-10deg);*/ 25% {
top: 80%;
transform: rotate(0deg);
background-color: skyblue;
}
50% {
top: 70%;
background-color: red;
transform: rotate(-30deg);
}
专业学位与学术学位的区别75% {
top: 80%;
background-color: deeppink; transform: rotate(-15deg);
}
}
/* ⼤腿2动画 */
@keyframes rootLegWalk2 {
25% {
/*向前迈*/
transform: rotate(30deg);
}
50% {
transform: rotate(5deg);
}
75% {
/*往后登*/
transform: rotate(-15deg);
}
}
/* ⼩腿2动画 */
babyonemoretime@keyframes subLegWalk2 { 25% {
top: 80%;
transform: rotate(-30deg); background-color: transparent; }
50% {
top: 80%;
background-color: red; transform: rotate(-5deg);
}
75% {
top: 80%;
background-color: transparent; transform: rotate(0deg);
}
}
/
translate google com* 脚丫1动画 */
@keyframes foot1 {
xamen25% {
transform: rotate(-5deg);
}
50% {
transform: translateX(10px);
}
