-
Notifications
You must be signed in to change notification settings - Fork 0
/
base.css
31 lines (20 loc) · 2.04 KB
/
base.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* { margin: 0; padding: 0; border: 0; color: inherit; list-style-type: none; }
body { position: relative; width: 1000px; height: 100%; margin: auto; font-family: Arial, Georgia, "Times New Roman", serif; font-size: 12px; background-color: #fff; }
#main { position: relative; width: 1000px; height: 700px; background: black url('images/road2.png') 0 20px repeat-x; overflow: hidden; -webkit-transition: 10s linear background-position 3s; }
/* Au survol du main, le background défile de 7000px horizontalement et garde ses 20px de positionnement vertical */
#main:hover { background-position: 7000px 20px; }
.englobe { position: relative; top: 300px; width: 1000px; height: 20px; }
.voiture { display: inline-block; position: absolute; bottom: 0; right: 0; -webkit-transition: 10s cubic-bezier(0,1,1,0) -webkit-transform 3s; }
/* Toujours au survol du main, la div voiture qui contient tous les éléments qui se déplaceront avec la voiture, se déplace de 800px de droite à gauche d'ou le '-' */
#main:hover .voiture { -webkit-transform: translate(-800px, 0); }
.voiture img.carcasse { -webkit-transition: 2s ease-out -webkit-transform 200ms; }
/* Petite rotation de la carcase de la voiture pendant le burn de départ. A noter que cette transition ne dure que 2 secondes ( voir ligne ci-dessus). */
#main:hover img.carcasse { -webkit-transform: rotate(2deg); }
.voiture img.back, .voiture img.front { display: block; position: absolute; top: 31px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border: 2px solid black; -webkit-transition: 13s cubic-bezier(0.5,1,1,0.5) -webkit-transform; }
.voiture img.back { right: 24px; }
.voiture img.front { left: 18px; }
/* Mouvement de rotation des roues */
#main:hover img.back, #main:hover img.front { -webkit-transform: rotate(-18720deg); }
.voiture img.flames { position: absolute; top: 42px; left: 200px; visibility: hidden; -webkit-transition: 2s linear visibility 11s; }
/* Apparition des flammes du pot d'une durée de 2s et avec un retard de 11 secondes (voir ci-dessus) */
#main:hover img.flames { visibility: visible; }