Skip to content

Commit d617a0c

Browse files
elisheva1280LaurelineP
elisheva1280
and
LaurelineP
authored
My animation! #2956 (#2957)
* adding my animation * adding my animation * my animation! --------- Co-authored-by: Laureline Paris <[email protected]>
1 parent 5e268a7 commit d617a0c

File tree

3 files changed

+269
-0
lines changed

3 files changed

+269
-0
lines changed

‎Art/elisheva1280-RollingBike/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="he">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="styles.css">
6+
</head>
7+
<body>
8+
<div class="car-container car1">
9+
<div class="car-body"></div>
10+
<div class="car-roof"></div>
11+
<div class="car-window window-left"></div>
12+
<div class="car-window window-right"></div>
13+
<div class="car-wheel wheel-left"></div>
14+
<div class="car-wheel wheel-right"></div>
15+
<div class="car-light"></div>
16+
</div>
17+
<div class="car-container car2">
18+
<div class="car-body"></div>
19+
<div class="car-roof"></div>
20+
<div class="car-window window-left"></div>
21+
<div class="car-window window-right"></div>
22+
<div class="car-wheel wheel-left"></div>
23+
<div class="car-wheel wheel-right"></div>
24+
<div class="car-light"></div>
25+
</div>
26+
<div class="car-container police-car">
27+
<div class="car-body"></div>
28+
<div class="car-roof"></div>
29+
<div class="car-window window-left"></div>
30+
<div class="car-window window-right"></div>
31+
<div class="car-wheel wheel-left"></div>
32+
<div class="car-wheel wheel-right"></div>
33+
<div class="car-light"></div>
34+
<div class="police-light"></div>
35+
<div class="police-stripe"></div>
36+
</div>
37+
<div class="car-container ambulance-car">
38+
<div class="car-body"></div>
39+
<div class="car-roof"></div>
40+
<div class="car-window window-left"></div>
41+
<div class="car-window window-right"></div>
42+
<div class="car-wheel wheel-left"></div>
43+
<div class="car-wheel wheel-right"></div>
44+
<div class="car-light"></div>
45+
<div class="ambulance-light"></div>
46+
<div class="ambulance-stripe"></div>
47+
</div>
48+
</body>
49+
</html>

‎Art/elisheva1280-RollingBike/meta.json

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

‎Art/elisheva1280-RollingBike/styles.css

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
body {
2+
background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
3+
height: 100vh;
4+
margin: 0;
5+
overflow: hidden;
6+
}
7+
8+
/* כל מכונית במסלול גובה שונה */
9+
.car-container {
10+
position: absolute;
11+
left: -300px;
12+
width: 260px;
13+
height: 90px;
14+
}
15+
.car1 { top: 20vh; animation: car-zigzag1 6s linear infinite; }
16+
.car2 { top: 40vh; animation: car-zigzag2 7s linear infinite; }
17+
.police-car { top: 60vh; animation: car-zigzag3 5.5s linear infinite; }
18+
.ambulance-car { top: 80vh; animation: car-zigzag4 8s linear infinite; }
19+
20+
@keyframes car-zigzag1 {
21+
0% { left: -300px; top: 20vh; }
22+
20% { left: 20vw; top: 15vh; }
23+
40% { left: 45vw; top: 25vh; }
24+
60% { left: 70vw; top: 15vh; }
25+
80% { left: 90vw; top: 25vh; }
26+
100% { left: 100vw; top: 20vh; }
27+
}
28+
@keyframes car-zigzag2 {
29+
0% { left: -300px; top: 40vh; }
30+
20% { left: 20vw; top: 35vh; }
31+
40% { left: 45vw; top: 45vh; }
32+
60% { left: 70vw; top: 35vh; }
33+
80% { left: 90vw; top: 45vh; }
34+
100% { left: 100vw; top: 40vh; }
35+
}
36+
@keyframes car-zigzag3 {
37+
0% { left: -300px; top: 60vh; }
38+
20% { left: 20vw; top: 55vh; }
39+
40% { left: 45vw; top: 65vh; }
40+
60% { left: 70vw; top: 55vh; }
41+
80% { left: 90vw; top: 65vh; }
42+
100% { left: 100vw; top: 60vh; }
43+
}
44+
@keyframes car-zigzag4 {
45+
0% { left: -300px; top: 80vh; }
46+
20% { left: 20vw; top: 75vh; }
47+
40% { left: 45vw; top: 85vh; }
48+
60% { left: 70vw; top: 75vh; }
49+
80% { left: 90vw; top: 85vh; }
50+
100% { left: 100vw; top: 80vh; }
51+
}
52+
53+
/* גוף המכונית */
54+
.car-body {
55+
position: absolute;
56+
bottom: 0;
57+
left: 0;
58+
width: 220px;
59+
height: 50px;
60+
background: #1976d2;
61+
border-radius: 20px 40px 30px 30px / 30px 40px 30px 30px;
62+
box-shadow: 0 8px 24px #1976d255;
63+
z-index: 2;
64+
}
65+
.car1 .car-body { background: #1976d2; }
66+
.car2 .car-body { background: #43a047; }
67+
.police-car .car-body { background: #fff; border: 2px solid #222; }
68+
.ambulance-car .car-body { background: #fff; border: 2px solid #e53935; }
69+
70+
/* גג */
71+
.car-roof {
72+
position: absolute;
73+
left: 40px;
74+
bottom: 38px;
75+
width: 110px;
76+
height: 32px;
77+
background: #2196f3;
78+
border-radius: 30px 30px 10px 10px / 40px 40px 10px 10px;
79+
z-index: 3;
80+
}
81+
.car1 .car-roof { background: #2196f3; }
82+
.car2 .car-roof { background: #66bb6a; }
83+
.police-car .car-roof { background: #90caf9; }
84+
.ambulance-car .car-roof { background: #fff; border: 2px solid #e53935; }
85+
86+
/* חלונות */
87+
.car-window {
88+
position: absolute;
89+
bottom: 48px;
90+
width: 38px;
91+
height: 30px;
92+
background: #e3f2fd;
93+
border-radius: 8px 12px 8px 8px;
94+
z-index: 4;
95+
border: 2px solid #90caf9;
96+
}
97+
.window-left { left: 52px; }
98+
.window-right { left: 102px; }
99+
.police-car .car-window,
100+
.ambulance-car .car-window {
101+
background: #fff;
102+
border: 2px solid #bdbdbd;
103+
}
104+
105+
/* גלגלים */
106+
.car-wheel {
107+
position: absolute;
108+
bottom: -18px;
109+
width: 40px;
110+
height: 40px;
111+
background: #222;
112+
border-radius: 50%;
113+
border: 5px solid #444;
114+
z-index: 5;
115+
animation: wheel-spin 0.8s linear infinite;
116+
}
117+
.wheel-left { left: 30px; }
118+
.wheel-right { left: 150px; }
119+
@keyframes wheel-spin {
120+
100% { transform: rotate(360deg);}
121+
}
122+
123+
/* פנס */
124+
.car-light {
125+
position: absolute;
126+
right: 0;
127+
bottom: 18px;
128+
width: 18px;
129+
height: 10px;
130+
background: #fff176;
131+
border-radius: 0 10px 10px 0;
132+
z-index: 6;
133+
box-shadow: 0 0 16px 6px #fff59d88;
134+
}
135+
.police-car .car-light { background: #90caf9; box-shadow: 0 0 16px 6px #90caf988; }
136+
.ambulance-car .car-light { background: #ff8a80; box-shadow: 0 0 16px 6px #ff8a8088; }
137+
138+
/* פס משטרה */
139+
.police-stripe {
140+
position: absolute;
141+
left: 0;
142+
top: 32px;
143+
width: 220px;
144+
height: 10px;
145+
background: #1976d2;
146+
z-index: 4;
147+
border-radius: 5px;
148+
}
149+
.police-car .police-stripe {}
150+
151+
/* אור משטרה */
152+
.police-light {
153+
position: absolute;
154+
left: 95px;
155+
bottom: 70px;
156+
width: 30px;
157+
height: 12px;
158+
background: linear-gradient(90deg, #1976d2 50%, #e53935 50%);
159+
border-radius: 4px;
160+
z-index: 10;
161+
box-shadow: 0 0 12px 4px #1976d288, 0 0 12px 4px #e5393588;
162+
}
163+
164+
/* פס אמבולנס */
165+
.ambulance-stripe {
166+
position: absolute;
167+
left: 0;
168+
top: 32px;
169+
width: 220px;
170+
height: 10px;
171+
background: #e53935;
172+
z-index: 4;
173+
border-radius: 5px;
174+
}
175+
176+
/* אור אמבולנס */
177+
.ambulance-light {
178+
position: absolute;
179+
left: 95px;
180+
bottom: 70px;
181+
width: 30px;
182+
height: 12px;
183+
background: #ff1744;
184+
border-radius: 4px;
185+
z-index: 10;
186+
box-shadow: 0 0 16px 6px #ff174488;
187+
}
188+
189+
/* צלב אדום */
190+
.ambulance-cross {
191+
position: absolute;
192+
left: 170px;
193+
top: 10px;
194+
width: 18px;
195+
height: 18px;
196+
z-index: 11;
197+
}
198+
.ambulance-cross::before,
199+
.ambulance-cross::after {
200+
content: "";
201+
position: absolute;
202+
background: #e53935;
203+
border-radius: 2px;
204+
}
205+
.ambulance-cross::before {
206+
left: 7px;
207+
top: 0;
208+
width: 4px;
209+
height: 18px;
210+
}
211+
.ambulance-cross::after {
212+
left: 0;
213+
top: 7px;
214+
width: 18px;
215+
height: 4px;
216+
}

0 commit comments

Comments
 (0)