--- HTML CODE ---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stickman_Animation_1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Cool Programming Projects -->
<div class="container">
<div class="head"></div>
<div class="body"></div>
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-leg"></div>
<div class="left-leg"></div>
</div>
<div class="container1"></div>
<div class="road"></div>
</body>
</html>
--- CSS CODE ---
*{
padding:0;
margin:0;
}
body{
width:100%;
height:100vh;
background: linear-gradient(black,white);
position: relative;
overflow: hidden;
}
body::before{
content:"";
position: absolute;
width:100%;
height:100%;
opacity: 0;
z-index: 2;
background-color: black;
animation:background-change 4s linear 5s 1;
}
.road{
height:100px;
width:100%;
background: linear-gradient(rgb(19, 19, 19),rgb(32, 32, 32));
position: absolute;
bottom:0px;
z-index: 1;
}
.container{
width:140px;
height:240px;
position: absolute;
bottom:90px;
animation: container-move 8s linear 1 forwards;
}
.container1{
width:220px;
height:220px;
position: absolute;
bottom:90px;
left:500px;
animation:container1 1s linear 9s 1 forwards,container1-move 10s linear 9s 1 forwards;
opacity: 0;
background-image:url(img1.gif) ;
}
.container .head{
width:80px;
height:80px;
border-radius: 50%;
border:5px solid black;
left: 24px;
position: absolute;
}
.body,.left-hand,.right-hand,.left-leg,.right-leg{
width:5px;
height:80px;
background-color: black;
position: absolute;
}
.container .body{
left: 65px;
top: 85px;
}
.container .left-hand{
left: 64px;
top: 90px;
transform: rotate(26deg);
transform-origin: top;
animation: left-hand 1s linear infinite alternate ;
}
.container .right-hand{
left: 64px;
top: 90px;
transform: rotate(-26deg);
transform-origin: top;
animation: right-hand 1s linear infinite alternate ;
}
.container .left-leg{
left: 64px;
top: 163px;
transform: rotate(23deg);
transform-origin: top;
animation: left-leg 1s linear infinite alternate ;
}
.container .right-leg{
left: 64px;
top: 163px;
transform: rotate(-23deg);
transform-origin: top;
animation: right-leg 1s linear infinite alternate ;
}
/* Transitions */
@keyframes container-move {
0%{
left:0px;
opacity: 1;
display: block;
}
98%{
left:400px;
opacity: 1;
display: block;
}
100%{
left:400px;
opacity: 0;
display: none;
}
}
@keyframes left-hand {
0%{
transform:rotate(26deg);
}
100%{
transform:rotate(-26deg);
}
}
@keyframes right-hand {
0%{
transform:rotate(-26deg);
}
100%{
transform:rotate(26deg);
}
}
@keyframes left-leg {
0%{
transform:rotate(23deg);
}
100%{
transform:rotate(-23deg);
}
}
@keyframes right-leg {
0%{
transform:rotate(-23deg);
}
100%{
transform:rotate(23deg);
}
}
@keyframes background-change {
0%{
opacity: 0;
}
60%{
opacity: 0;
}
75%{
opacity: 1;
}
85%{
opacity:1;
}
100%{
opacity: 0;
}
}
@keyframes container1 {
0%{
opacity:0;
display: block;
}
100%{
opacity:1;
display: block;
}
}
@keyframes container1-move{
0%{
left:450px;
}
25%{
left:450px;
}
35%{
left:550px;
}
60%{
left:550px;
}
61%{
left:550px;
}
70%{
left:500px;
}
100%{
left:500px;
}
}
Resources :
1. stickman_Gif
Post a Comment