純css實(shí)現(xiàn)機(jī)器人走路動畫
由于發(fā)現(xiàn)了css的這個現(xiàn)象
當(dāng)一個有元素嵌套的時候叙甸，父元素有動畫秧耗，子元素也有動畫，那么子元素的運(yùn)動會相對父元素的運(yùn)動而運(yùn)動
所以我忽然想到庐完，實(shí)現(xiàn)人的走路動畫并不是不可能的了钢属。
我開始搭建人體的結(jié)構(gòu)，讓人的每一個發(fā)生運(yùn)動了的部分都設(shè)置為一個單獨(dú)的盒子门躯。
然后編輯和調(diào)整動畫代碼淆党，一邊站起來自己比劃動作比對一邊寫代碼。
終于讶凉，今天染乌，大二，我實(shí)現(xiàn)了小學(xué)時候想用flash做出人體走路動畫懂讯。
然后我開始又繼續(xù)添加?xùn)|西荷憋，把這個人改成了拿著劍一邊揮舞一邊走路的機(jī)器人。
蠻有趣的域醇，就是代碼寫的比較冗長台谊。
效果圖展示
walk.gif
2021-7-15_16-35-34.png
完整源代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一個機(jī)器人走路動畫</title>
<style>
* {
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);
}
}
/* 大臂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);
}
50% {
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動畫 */
@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);
}
}
/* 腳丫1動畫 */
@keyframes foot1 {
25% {
transform: rotate(-5deg);
}
50% {
transform: translateX(10px);
}
75% {
transform: rotate(10deg);
}
}
/* 腳丫2動畫 */
@keyframes foot2 {
25% {
transform: rotate(20deg);
}
50% {
transform: translateX(10px);
}
75% {
transform: rotate(10deg);
}
}
/* 劍光動畫 */
@keyframes weaponLightAni {
25% {
width: 30px;
height: 0;
}
50% {
box-shadow: pink 0 0 40px;
/*transform: translateX(10px);*/
}
75% {
box-shadow: yellow 0 0 100px;
/*transform: rotate(10deg);*/
}
}
/* 劍動畫 */
@keyframes weaponAni {
50% {
transform: rotate(-360deg);
}
100% {
transform: rotate(-720deg);
}
}
.body {
width: 70px;
height: 200px;
position: relative;
left: 40%;
margin-top: 20vh;
border: solid 5px;
border-radius: 60px;
animation: bodyUpDown 2s infinite;
}
.eye {
width: 25px;
height: 10px;
position: absolute;
left: 5px;
top: 30%;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: deeppink;
animation: eyeAni 2s infinite;
}
.head {
width: 80px;
height: 80px;
position: absolute;
border: solid 5px;
margin-left: -10px;
transform-origin: center bottom;
margin-top: -70px;
border-top-left-radius: 30px;
border-bottom-right-radius: 50px;
animation: head 2s infinite;
}
.arm1, .arm2, .arm11, .arm22, .leg1, .leg2, .leg11, .leg22, .foot1, .foot2 {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.arm1 {
width: 42px;
height: 160px;
border: solid 5px;
position: absolute;
transform-origin: center top;
margin-left: 10px;
transform: translateY(20px) rotate(-30deg);
animation: rootArm1 2s infinite;
}
.arm11 {
width: 90%;
height: 90%;
border: solid 3px;
top: 80%;
position: absolute;
transform-origin: center top;
transform: rotate(0deg);
animation: subArm1 2s infinite;
}
.arm2 {
width: 100px;
height: 160px;
border: solid 5px;
position: absolute;
transform-origin: center top;
margin-left: -20px;
transform: translateY(20px) rotate(30deg);
opacity: 0.3;
animation: rootArm2 2s infinite;
}
.leg1 {
width: 50px;
height: 90%;
border: solid 5px;
position: absolute;
top: 80%;
left: 40%;
transform-origin: center top;
transform: rotate(5deg);
animation: rootLegWalk1 2s infinite;
}
.arm22 {
width: 90%;
height: 90%;
border: 3px solid;
border-bottom-right-radius: 100px;
border-bottom-width: 15px;
top: 80%;
position: absolute;
transform-origin: center top;
transform: rotate(30deg);
animation: subArm2 2s infinite;
}
.leg11 {
width: 90%;
height: 90%;
border: solid 4px;
position: absolute;
top: 80%;
transform-origin: center top;
transform: rotate(-10deg);
animation: subLegWalk1 2s infinite;
}
.foot1 {
width: 80px;
height: 30px;
position: absolute;
right: 0;
bottom: -3px;
border: solid 3px;
border-top-left-radius: 40px;
transform-origin: right center;
animation: foot1 2s infinite;
}
.leg2 {
width: 50px;
height: 90%;
border: solid 5px;
position: absolute;
top: 80%;
left: 10%;
opacity: 0.3;
transform-origin: top center;
transform: rotate(-5deg);
animation: rootLegWalk2 2s infinite;
}
.leg22 {
width: 90%;
height: 90%;
border: solid 4px;
position: absolute;
top: 70%;
transform-origin: top center;
transform: rotate(-30deg);
animation: subLegWalk2 2s infinite;
}
.foot2 {
width: 80px;
height: 30px;
position: absolute;
right: 0;
bottom: -3px;
border: solid 3px;
border-top-left-radius: 40px;
animation: foot2 2s infinite;
}
.finger1, .finger2, .finger3, .finger4, .finger5 {
width: 5px;
height: 30px;
border: solid 2px;
position: absolute;
transform-origin: top center;
top: 95%;
}
.finger1 {
left: 20%;
}
.finger2 {
left: 40%;
}
.finger3 {
left: 60%;
}
.finger4 {
left: 80%;
}
.finger5 {
left: 0;
width: 10px;
height: 15px;
transform: rotate(30deg);
}
.weapon {
width: 60px;
height: 20px;
position: absolute;
right: -20px;
bottom: -20px;
border: solid 2px;
transform-origin: 20px center;
animation: weaponAni 2s infinite;
}
.light {
width: 300px;
height: 40px;
position: absolute;
right: 60px;
background-color: hotpink;
border-bottom-left-radius: 100px;
animation: weaponLightAni 2s infinite;
}
</style>
</head>
<body>
<div class="body">
<div class="head">
<div class="eye"></div>
</div>
<div class="arm1">
<div class="arm11">
<div class="finger1"></div>
<div class="finger2"></div>
<div class="finger3"></div>
<div class="finger4"></div>
<div class="finger5"></div>
<div class="weapon">
<div class="light"></div>
</div>
</div>
</div>
<div class="arm2">
<div class="arm22"></div>
</div>
<div class="leg1">
<div class="leg11">
<div class="foot1"></div>
</div>
</div>
<div class="leg2">
<div class="leg22">
<div class="foot2"></div>
</div>
</div>
</div>
</body>
</html>
