Today I made up my mind to prepare nice CSS3 experiment. I wanted to create a nice looking environment with a lot of moving elements. As background, I selected DJ music console. In this demo anything is movable only with CSS3 (without any javascript). I used various css3 technics like keyframes, animation, transformation (rotation and scale). Welcome to test it.
So, lets start
Step 1. HTML
Everything is very easy, isn’t it? As you can see – it contains a lot of different images.
index.html
02 |
< img src = "images/back.jpg" > |
03 |
< img class = "v1" src = "images/v1.png" > |
04 |
< img class = "v2" src = "images/v2.png" > |
05 |
< img class = "v3" src = "images/v3.png" > |
06 |
< img class = "v4" src = "images/v4.png" > |
07 |
< img class = "s1" src = "images/speaker.png" > |
08 |
< img class = "si1" src = "images/speaker-in.png" > |
09 |
< img class = "s2" src = "images/speaker.png" > |
10 |
< img class = "si2" src = "images/speaker-in.png" > |
11 |
< img class = "s3" src = "images/speaker.png" > |
12 |
< img class = "si3" src = "images/speaker-in.png" > |
13 |
< img class = "s4" src = "images/speaker.png" > |
14 |
< img class = "si4" src = "images/speaker-in.png" > |
15 |
< img class = "slid1" src = "images/slid1.png" > |
16 |
< img class = "slid2" src = "images/slid1.png" > |
17 |
< img class = "b1" src = "images/but1.png" > |
18 |
< img class = "b2" src = "images/but2.png" > |
19 |
< img class = "b3" src = "images/but3.png" > |
20 |
< img class = "b4" src = "images/but1.png" > |
21 |
< img class = "b5" src = "images/but2.png" > |
22 |
< img class = "b6" src = "images/but3.png" > |
23 |
< img class = "eq" src = "images/space.gif" > |
24 |
< img class = "eq2" src = "images/space.gif" > |
Step 2. CSS
Now, its time to style our musical demo. Don’t forget to include our CSS file in the head section of the result page.
css/main.css
003 |
margin : 100px auto 0 ; |
008 |
@-webkit-keyframes vinyl { |
010 |
-moz-transform: rotate( 0 deg); |
011 |
-webkit-transform: rotate( 0 deg); |
014 |
-moz-transform: rotate( 360 deg); |
015 |
-webkit-transform: rotate( 360 deg); |
018 |
@-moz-keyframes vinyl { |
020 |
-moz-transform: rotate( 0 deg); |
021 |
-webkit-transform: rotate( 0 deg); |
024 |
-moz-transform: rotate( 360 deg); |
025 |
-webkit-transform: rotate( 360 deg); |
030 |
-moz-animation-name: vinyl; |
031 |
-moz-animation-duration: 3 s; |
032 |
-moz-animation-timing-function: linear; |
033 |
-moz-animation-iteration-count: infinite; |
034 |
-moz-animation- direction : normal ; |
035 |
-moz-animation-delay: 0 ; |
036 |
-moz-animation-play-state: running; |
037 |
-moz-animation-fill-mode: forwards; |
038 |
-webkit-animation-name: vinyl; |
039 |
-webkit-animation-duration: 3 s; |
040 |
-webkit-animation-timing-function: linear; |
041 |
-webkit-animation-iteration-count: infinite; |
042 |
-webkit-animation- direction : normal ; |
043 |
-webkit-animation-delay: 0 ; |
044 |
-webkit-animation-play-state: running; |
045 |
-webkit-animation-fill-mode: forwards; |
068 |
@-webkit-keyframes speaker { |
070 |
-moz-transform: scale( 0.75 ); |
071 |
-webkit-transform: scale( 0.75 ); |
074 |
-moz-transform: scale( 0.85 ); |
075 |
-webkit-transform: scale( 0.85 ); |
078 |
-moz-transform: scale( 0.75 ); |
079 |
-webkit-transform: scale( 0.75 ); |
082 |
@-moz-keyframes speaker { |
084 |
-moz-transform: scale( 0.75 ); |
085 |
-webkit-transform: scale( 0.75 ); |
088 |
-moz-transform: scale( 0.85 ); |
089 |
-webkit-transform: scale( 0.85 ); |
092 |
-moz-transform: scale( 0.75 ); |
093 |
-webkit-transform: scale( 0.75 ); |
096 |
.si 1 , .si 2 , .si 3 , .si 4 { |
098 |
-webkit-transform:scale( 0.75 ); |
099 |
-moz-transform:scale( 0.75 ); |
100 |
-ms-transform:scale( 0.75 ); |
101 |
-o-transform:scale( 0.75 ); |
102 |
transform:scale( 0.75 ); |
104 |
-moz-animation-name: speaker; |
105 |
-moz-animation-duration: 0.5 s; |
106 |
-moz-animation-timing-function: linear; |
107 |
-moz-animation-iteration-count: infinite; |
108 |
-moz-animation- direction : normal ; |
109 |
-moz-animation-delay: 0 ; |
110 |
-moz-animation-play-state: running; |
111 |
-moz-animation-fill-mode: forwards; |
112 |
-webkit-animation-name: speaker; |
113 |
-webkit-animation-duration: 0.5 s; |
114 |
-webkit-animation-timing-function: linear; |
115 |
-webkit-animation-iteration-count: infinite; |
116 |
-webkit-animation- direction : normal ; |
117 |
-webkit-animation-delay: 0 ; |
118 |
-webkit-animation-play-state: running; |
119 |
-webkit-animation-fill-mode: forwards; |
136 |
-moz-animation-delay: 0.25 s; |
137 |
-webkit-animation-delay: 0.25 s; |
159 |
-moz-animation-delay: 0.25 s; |
160 |
-webkit-animation-delay: 0.25 s; |
168 |
@-webkit-keyframes slider { |
179 |
@-moz-keyframes slider { |
192 |
-moz-animation-name: slider; |
193 |
-moz-animation-duration: 2.0 s; |
194 |
-moz-animation-timing-function: linear; |
195 |
-moz-animation-iteration-count: infinite; |
196 |
-moz-animation- direction : normal ; |
197 |
-moz-animation-delay: 0 ; |
198 |
-moz-animation-play-state: running; |
199 |
-moz-animation-fill-mode: forwards; |
200 |
-webkit-animation-name: slider; |
201 |
-webkit-animation-duration: 2.0 s; |
202 |
-webkit-animation-timing-function: linear; |
203 |
-webkit-animation-iteration-count: infinite; |
204 |
-webkit-animation- direction : normal ; |
205 |
-webkit-animation-delay: 0 ; |
206 |
-webkit-animation-play-state: running; |
207 |
-webkit-animation-fill-mode: forwards; |
219 |
-moz-animation-delay: -1.0 s; |
220 |
-webkit-animation-delay: -1.0 s; |
223 |
@-webkit-keyframes buttons { |
234 |
@-moz-keyframes buttons { |
245 |
.b 1 , .b 2 , .b 3 , .b 4 , .b 5 , .b 6 { |
247 |
-moz-animation-name: buttons; |
248 |
-moz-animation-duration: 1.0 s; |
249 |
-moz-animation-timing-function: linear; |
250 |
-moz-animation-iteration-count: infinite; |
251 |
-moz-animation- direction : normal ; |
252 |
-moz-animation-delay: 0 ; |
253 |
-moz-animation-play-state: running; |
254 |
-moz-animation-fill-mode: forwards; |
255 |
-webkit-animation-name: buttons; |
256 |
-webkit-animation-duration: 1.0 s; |
257 |
-webkit-animation-timing-function: linear; |
258 |
-webkit-animation-iteration-count: infinite; |
259 |
-webkit-animation- direction : normal ; |
260 |
-webkit-animation-delay: 0 ; |
261 |
-webkit-animation-play-state: running; |
262 |
-webkit-animation-fill-mode: forwards; |
274 |
-moz-animation-delay: 0.3 s; |
275 |
-webkit-animation-delay: 0.3 s; |
282 |
-moz-animation-delay: 0.6 s; |
283 |
-webkit-animation-delay: 0.6 s; |
290 |
-moz-animation-delay: 0.3 s; |
291 |
-webkit-animation-delay: 0.3 s; |
298 |
-moz-animation-delay: 0.6 s; |
299 |
-webkit-animation-delay: 0.6 s; |
307 |
@-webkit-keyframes eq { |
309 |
background-position : 0 0 ; |
312 |
background-position : 0 -92px ; |
317 |
background-position : 0 0 ; |
320 |
background-position : 0 -92px ; |
324 |
background : url ( "../images/eq.png" ) no-repeat scroll center top transparent ; |
331 |
-moz-animation-name: eq; |
332 |
-moz-animation-duration: 2.0 s; |
333 |
-moz-animation-timing-function: linear; |
334 |
-moz-animation-iteration-count: infinite; |
335 |
-moz-animation- direction : normal ; |
336 |
-moz-animation-delay: 0 ; |
337 |
-moz-animation-play-state: running; |
338 |
-moz-animation-fill-mode: forwards; |
339 |
-webkit-animation-name: eq; |
340 |
-webkit-animation-duration: 2.0 s; |
341 |
-webkit-animation-timing-function: linear; |
342 |
-webkit-animation-iteration-count: infinite; |
343 |
-webkit-animation- direction : normal ; |
344 |
-webkit-animation-delay: 0 ; |
345 |
-webkit-animation-play-state: running; |
346 |
-webkit-animation-fill-mode: forwards; |
349 |
@-webkit-keyframes eq 2 { |
351 |
background-position : 0 0 ; |
354 |
background-position : -260px 0 ; |
357 |
@-moz-keyframes eq 2 { |
359 |
background-position : 0 0 ; |
362 |
background-position : -260px 0 ; |
366 |
background : url ( "../images/eq2.png" ) no-repeat scroll center top transparent ; |
373 |
-moz-animation-name: eq 2 ; |
374 |
-moz-animation-duration: 6.0 s; |
375 |
-moz-animation-timing-function: linear; |
376 |
-moz-animation-iteration-count: infinite; |
377 |
-moz-animation- direction : normal ; |
378 |
-moz-animation-delay: 0 ; |
379 |
-moz-animation-play-state: running; |
380 |
-moz-animation-fill-mode: forwards; |
381 |
-webkit-animation-name: eq 2 ; |
382 |
-webkit-animation-duration: 6.0 s; |
383 |
-webkit-animation-timing-function: linear; |
384 |
-webkit-animation-iteration-count: infinite; |
385 |
-webkit-animation- direction : normal ; |
386 |
-webkit-animation-delay: 0 ; |
387 |
-webkit-animation-play-state: running; |
388 |
-webkit-animation-fill-mode: forwards; |
I think that everything should be very easy for you. I used -moz and -webkit prefixes in order to teach it works in FF and Webkit-based browsers (Chrome and Safari).
Conclusion
Thats all, today we have created new animated demonstration with CSS3. You are free to modify our result and use it at your websites. Feel free to share our tutorials with your friends. Good luck!