Skip to content

Commit b93eb6e

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #174 from sudarsan2k5/runing
character runing
2 parents 63cfc11 + 6943f84 commit b93eb6e

3 files changed

Lines changed: 104 additions & 0 deletions

File tree

‎Css Animations/Character Runing/girl.png‎

44.5 KB
Loading

‎Css Animations/Character Runing/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=Infinite, initial-scale=1.0">
5+
<link rel="stylesheet" href="./style.css">
6+
<title>Infinte Road Animation</title>
7+
</head>
8+
<body>
9+
<div class="infinite">
10+
<div class="girl">
11+
12+
</div>
13+
<div class="shadow">
14+
15+
</div>
16+
</div>
17+
</body>
18+
</html>

‎Css Animations/Character Runing/style.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
*
2+
{
3+
margin: 0;
4+
padding:0;
5+
}
6+
body{
7+
display:flex;
8+
justify-content:center;
9+
align-items:center;
10+
min-width:100vh;
11+
background: radial-gradient(#9bdfff, #009be4);
12+
}
13+
.infinite
14+
{
15+
padding:relative;
16+
width: 800px;
17+
height: 160px;
18+
background: #525252;
19+
transform-origin: bottom;
20+
transform-style: preserve-3d;
21+
transform: perspective(500px) rotateX(30deg);
22+
}
23+
.infinite::before
24+
{
25+
content: '';
26+
position: absolute;
27+
top:50%;
28+
left:0;
29+
transform: translateY(-50%);
30+
width:100%;
31+
height:10px;
32+
background: linear-gradient(90deg, #fff 0%,#fff 70%,
33+
#525252 70%, #525252 100%);
34+
background-size: 120px;
35+
animation: animateRoad 0.4s linear infinite;
36+
}
37+
@keyframes animateRoad
38+
{
39+
0% {
40+
background-position: 0px;
41+
}
42+
100% {
43+
background-position: -120px;
44+
}
45+
}
46+
.infinite::after
47+
{
48+
content: '';
49+
position: absolute;
50+
width: 99%;
51+
height: 30px;
52+
background: #333;
53+
bottom: -30px;
54+
transform: perspective(500px) rotateX(-25deg);
55+
}
56+
.shadow
57+
{
58+
position: absolute;
59+
bottom: -90px;
60+
left: 50%;
61+
transform: translateX(-50%);
62+
width: 95%;
63+
height: 60px;
64+
background: linear-gradient(#000, transparent);
65+
opacity: 0.5;
66+
}
67+
68+
.girl
69+
{
70+
position: relative;
71+
height: 256px;
72+
width: calc(1536px / 6);
73+
background: url(girl.png);
74+
transform: perspective(500px) rotateX(-25deg) translateY(-150px);
75+
-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
76+
animation : animateGirl 1s steps(6) infinite;
77+
}
78+
@keyframes animateGirl
79+
{
80+
from {
81+
background-position: 0;
82+
}
83+
to {
84+
background-position: -1536px;
85+
}
86+
}

0 commit comments

Comments
 (0)