Как заставить правую руку двигаться вверх, а затем махать рукой? - PullRequest
Новая
       35

Как заставить правую руку двигаться вверх, а затем махать рукой?

0 голосов
/ 16 мая 2019

Я пытаюсь заставить правую руку моей CSS-анимации двигаться вверх и затем махать, как мне добиться этого с помощью ключевых кадров в CSS?Кстати, не запускайте здесь фрагмент кода, попробуйте запустить его в отдельном файле в Google Chrome, чтобы он отображался правильно.Я также хочу, чтобы он был аккуратным, чтобы рука все еще была прикреплена к рубашке, когда она машет, а рука и рукав должны двигаться одинаково, спасибо за помощь.

<!DOCTYPE html>
<html>
<head>
	<title>Waving Person</title>
	<style>
	body{
		
		background-color:#F8FF09;
		overflow-x:hidden;
	}
	.face{
		width:94px;
		height:94px;
		border-radius: 0 0 90px 90px;
		background-color:#ffecb3;
		position:absolute;
		top:25.2%;
		left:46%;
		
	}
	.h1{
		width:105px; 
     height:35px; 
     background:saddlebrown;
     border-radius: 20px 20px 20px 20px;
	 position:absolute;
	 top:24.5%;
	left:45.5%;
	
	}
	.h2{
		 height:45px;
     width:75px;
     border-radius: 45px;
     background:saddlebrown;
	 position:absolute;
	 top:18.5%;
	left:46.3%;
	}
	.eye1{
		background-color:white;
		border-radius:50%;
		height:20px;
		width:20px;
		position:absolute;
		top:30.7%;
		left:46.9%;
		
	}
	.eye2{
		background-color:white;
		border-radius:50%;
		height:20px;
		width:20px;
		position:absolute;
		top:30.7%;
		left:50.1%;
	}
	.eyeball,.eyeball2{
		height: 13px;
        width: 13px;
        background-color: black;
        border-radius: 50%;
		position:absolute;
	}
	.eyeball{
		top:31.2%;
		left:47.2%;
	}
	.eyeball2{
		top:31.2%;
		left:50.3%;
	}
	.d1,.d2{
		width:6px;
        height: 6px;
        border-radius: 50%;
        background-color: white;
		position:absolute;
	}
	.d1{
		top:31.2%;
		left:47.2%;
	}
	.d2{
		top:31.2%;
		left:50.8%;
	}
	.mouth{
		 width: 20px;
            height: 20px;
            background:red;
            -webkit-border-radius: 20px 0px;
            border-radius: 20px 0px;
            transform: rotate(45deg);
            position: relative;
			left:649px;
		top:220px;
	}
.b1,.b2{
	background-color:#ffb3b3;
	width:10px;
	height:5px;
	border-radius:50%;
	position:relative;
}
.b1{
	left:625px;
	top:202px;
}
.b2{
	left:685px;
	top:197px;
	
}
.neck1{
	width:20px;
     height:25px;
     background-color:#ffecb3;
	 position:relative;
	 left:650px;
	 top:220px;
}

.neck2{
	border-radius: 0 0 90px 90px;
	height:25px;
	width:45px;
	background-color:#ffecb3;
	position:relative;
    left:637px;
	 top:220px;
}

.e1,.e2,.e3,.e4,.e5,.e6{
	background-color:black;
	width:10px;
    height:1.1px;
	transform:rotate(85deg);
	position:relative;
	
}
.e1{
	left:622.2px;
	top:114px;
}
.e2{
	left:628.2px;
	top:113px;
}
.e3{
	left:635.2px;
	top:113px;
}
.e4{
	left:666px;
	top:112px;
}
.e5{
	left:673px;
	top:109px;
}
.e6{
	left:679px;
	top:110px;
}
.t1{
	width:80px;
	height: 120px;
      background-color:crimson;
     border-radius: 15px;
	position:relative;	
    left:625px;
	 top:190px;
	 z-index:-1;
	 animation:change 2s infinite;
}
.t2{
	border-bottom: 70px solid crimson;
	border-left: 35px solid transparent;
	border-right: 40px solid transparent;
	border-radius:15px;
	height: 0;
	width: 125px;
	position:relative;
	left:570px;
	top:170px;
	
}
.belt{
	position:relative;
	left:625px;
	top:65px;
}
.hand1{
	position: relative;
            background-color: #ffecb3;
            height: 100px;
            width: 20px;
            border-radius:10px;
            position:relative;
			left:595px;
			bottom:50px;
            transform: rotate(25deg);
}
.s1{
	border-top-left-radius: 25px;
    border-top-right-radius: 25px;
	background-color:crimson;
	height:90px;
	width:20px;
	transform:rotate(25deg);
	position:relative;
	left:603px;
	bottom:260px;
	
}
.hand2{
	position: relative;
            background-color: #ffecb3;
            height: 100px;
            width: 20px;
            border-radius:10px;
            position:relative;
			left:715px;
			bottom:155px;
            transform:rotate(-25deg);
			
}
.s2{
	border-top-left-radius: 25px;
    border-top-right-radius: 25px;
	background-color:crimson;
	height:90px;
	width:20px;
	transform:rotate(-25deg);
	position:relative;
	left:707px;
	bottom:357px;
	
}

	</style>
</head>
<body>
<div class="face"></div>
<div class="h1"></div>
<div class="h2"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="eyeball"></div>
<div class="eyeball2"></div>
<div class="d1"></div>
<div class="d2"></div>
<div class="mouth"></div>
<div class="teeth"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="neck1"></div>
<div class="neck2"></div>
<div class="e1"></div>
<div class="e2"></div>
<div class="e3"></div>
<div class="e4"></div>
<div class="e5"></div>
<div class="e6"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="belt">
<img src="https://i.ibb.co/2qCZQJv/5-2-belt-png-hd-thumb.png width="100px" height="80px""></div>
<div class="hand1"></div>
<div class="hand2"></div>
<div class="s1"></div>
<div class="s2"></div>

</body>
</html>
...