Skip to content

Commit 4e7920c

Browse files
Ujjansh05Ujjansh05
authored
Added Speedy Truck Animation (#3220)
* Sky * Done with changes * changed to github handle * Glitch Text Effect * Delete Art/Ujjansh05-Night-Sky/index.html * Delete Art/Ujjansh05-Night-Sky/meta.json * Delete Art/Ujjansh05-Night-Sky/styles.css * fix error * fix errors * Speedy Truck animation * Delete Art/Ujjansh05_Glitch_Effect/index.html * Delete Art/Ujjansh05_Glitch_Effect/meta.json * Delete Art/Ujjansh05_Glitch_Effect/styles.css
1 parent 11b930d commit 4e7920c

3 files changed

Lines changed: 176 additions & 0 deletions

File tree

‎Art/Ujjansh05_SpeedyTruck/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Speedy Truck Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="loop-wrapper">
11+
<div class="mountain"></div>
12+
<div class="hill"></div>
13+
<div class="tree"></div>
14+
<div class="tree"></div>
15+
<div class="tree"></div>
16+
<div class="rock"></div>
17+
<div class="truck"></div>
18+
<div class="wheels"></div>
19+
</div>
20+
</body>
21+
</html>

‎Art/Ujjansh05_SpeedyTruck/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"githubHandle": "Ujjansh05",
3+
"artName": "Speedy Truck"
4+
}

‎Art/Ujjansh05_SpeedyTruck/styles.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
body {
2+
background: #009688;
3+
overflow: hidden;
4+
font-family: 'Open Sans', sans-serif;
5+
}
6+
.loop-wrapper {
7+
margin: 0 auto;
8+
position: relative;
9+
display: block;
10+
width: 1000px;
11+
height: 400px;
12+
overflow: hidden;
13+
border-bottom: 3px solid #fff;
14+
color: #fff;
15+
}
16+
.mountain {
17+
position: absolute;
18+
right: -900px;
19+
bottom: -20px;
20+
width: 2px;
21+
height: 2px;
22+
box-shadow:
23+
0 0 0 50px #4DB6AC,
24+
60px 50px 0 70px #4DB6AC,
25+
90px 90px 0 50px #4DB6AC,
26+
250px 250px 0 50px #4DB6AC,
27+
290px 320px 0 50px #4DB6AC,
28+
320px 400px 0 50px #4DB6AC
29+
;
30+
transform: rotate(130deg);
31+
animation: mtn 20s linear infinite;
32+
}
33+
.hill {
34+
position: absolute;
35+
right: -900px;
36+
bottom: -50px;
37+
width: 400px;
38+
border-radius: 50%;
39+
height: 20px;
40+
box-shadow:
41+
0 0 0 50px #4DB6AC,
42+
-20px 0 0 20px #4DB6AC,
43+
-90px 0 0 50px #4DB6AC,
44+
250px 0 0 50px #4DB6AC,
45+
290px 0 0 50px #4DB6AC,
46+
620px 0 0 50px #4DB6AC;
47+
animation: hill 4s 2s linear infinite;
48+
}
49+
.tree, .tree:nth-child(2), .tree:nth-child(3) {
50+
position: absolute;
51+
height: 100px;
52+
width: 35px;
53+
bottom: 0;
54+
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/tree.svg) no-repeat;
55+
}
56+
.rock {
57+
margin-top: -17%;
58+
height: 2%;
59+
width: 2%;
60+
bottom: -2px;
61+
border-radius: 20px;
62+
position: absolute;
63+
background: #ddd;
64+
}
65+
.truck, .wheels {
66+
transition: all ease;
67+
width: 85px;
68+
margin-right: -60px;
69+
bottom: 0px;
70+
right: 50%;
71+
position: absolute;
72+
background: #eee;
73+
}
74+
.truck {
75+
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/truck.svg) no-repeat;
76+
background-size: contain;
77+
height: 60px;
78+
}
79+
.truck:before {
80+
content: " ";
81+
position: absolute;
82+
width: 25px;
83+
box-shadow:
84+
-30px 28px 0 1.5px #fff,
85+
-35px 18px 0 1.5px #fff;
86+
}
87+
.wheels {
88+
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/wheels.svg) no-repeat;
89+
height: 15px;
90+
margin-bottom: 0;
91+
}
92+
93+
.tree { animation: tree 3s 0.000s linear infinite; }
94+
.tree:nth-child(2) { animation: tree2 2s 0.150s linear infinite; }
95+
.tree:nth-child(3) { animation: tree3 8s 0.050s linear infinite; }
96+
.rock { animation: rock 4s 0.000s linear infinite; }
97+
.truck { animation: truck 4s 0.000s ease infinite; }
98+
.wheels { animation: truck 4s 0.000s ease infinite; }
99+
.truck:before { animation: wind 1.5s 0.000s ease infinite; }
100+
101+
102+
@keyframes tree {
103+
0% { transform: translate(1350px); }
104+
50% {}
105+
100% { transform: translate(-50px); }
106+
}
107+
@keyframes tree2 {
108+
0% { transform: translate(650px); }
109+
50% {}
110+
100% { transform: translate(-50px); }
111+
}
112+
@keyframes tree3 {
113+
0% { transform: translate(2750px); }
114+
50% {}
115+
100% { transform: translate(-50px); }
116+
}
117+
118+
@keyframes rock {
119+
0% { right: -200px; }
120+
6% { right: 50%; }
121+
11% { right: 100%; }
122+
100% { right: 2000px; }
123+
}
124+
@keyframes truck {
125+
0% { }
126+
6% { transform: translateY(0px); }
127+
7% { transform: translateY(-6px); }
128+
9% { transform: translateY(0px); }
129+
10% { transform: translateY(-1px); }
130+
11% { transform: translateY(0px); }
131+
100% { }
132+
}
133+
@keyframes wind {
134+
0% { }
135+
50% { transform: translateY(3px) }
136+
100% { }
137+
}
138+
@keyframes mtn {
139+
100% {
140+
transform: translateX(-2000px) rotate(130deg);
141+
}
142+
}
143+
@keyframes hill {
144+
100% {
145+
transform: translateX(-2000px);
146+
}
147+
}
148+
149+
150+
151+

0 commit comments

Comments
 (0)