OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 body { | 5 body { |
6 background: url('resources/Aurora.jpg'); | 6 background: url('resources/Aurora.jpg'); |
7 -webkit-background-size: 100% 100%; | 7 -webkit-background-size: 100% 100%; |
8 font-family: "Lucida Grande"; | 8 font-family: "Lucida Grande"; |
9 height: 800px; | 9 height: 800px; |
10 } | 10 } |
11 | 11 |
12 #features { | 12 #features { |
13 position: relative; | 13 position: relative; |
14 width: 400px; | 14 width: 400px; |
15 list-style: none; | 15 list-style: none; |
16 } | 16 } |
17 | 17 |
18 #features > li > .picture { | 18 #features > li > .picture { |
19 -webkit-transition-property: -webkit-transform; | 19 -webkit-transition-property: -webkit-transform; |
alancutter (OOO until 2018)
2014/10/14 05:13:49
Need to change the transition property target as w
| |
20 -webkit-transition-duration: 500ms; | 20 -webkit-transition-duration: 500ms; |
21 -webkit-transition-timing-function: ease-in; | 21 -webkit-transition-timing-function: ease-in; |
22 -webkit-transform: rotate(-5deg); | 22 transform: rotate(-5deg); |
23 opacity: 0.2; | 23 opacity: 0.2; |
24 border: 5px solid white; | 24 border: 5px solid white; |
25 background-color: gray; | 25 background-color: gray; |
26 position: absolute; | 26 position: absolute; |
27 left: 20%; | 27 left: 20%; |
28 width: 380px; | 28 width: 380px; |
29 height: 180px; | 29 height: 180px; |
30 top: 30px; | 30 top: 30px; |
31 } | 31 } |
32 | 32 |
33 #features > li.enabled > .picture { | 33 #features > li.enabled > .picture { |
34 -webkit-transition-timing-function: ease-out; | 34 -webkit-transition-timing-function: ease-out; |
35 -webkit-transform:rotate(10deg); | 35 transform:rotate(10deg); |
36 } | 36 } |
37 | 37 |
38 #features > li > .description { | 38 #features > li > .description { |
39 -webkit-transition-property: -webkit-transform; | 39 -webkit-transition-property: -webkit-transform; |
40 -webkit-transition-duration: 560ms; | 40 -webkit-transition-duration: 560ms; |
41 -webkit-transition-timing-function: ease-in; | 41 -webkit-transition-timing-function: ease-in; |
42 line-height: 1.4em; | 42 line-height: 1.4em; |
43 position: absolute; | 43 position: absolute; |
44 background-color: black; | 44 background-color: black; |
45 color: white; | 45 color: white; |
46 margin: 10px; | 46 margin: 10px; |
47 padding: 10px; | 47 padding: 10px; |
48 border: 3px solid white; | 48 border: 3px solid white; |
49 -webkit-border-radius: 9px; | 49 -webkit-border-radius: 9px; |
50 font-size: 16px; | 50 font-size: 16px; |
51 left: 20%; | 51 left: 20%; |
52 top: 330px; | 52 top: 330px; |
53 width: 350px; | 53 width: 350px; |
54 } | 54 } |
55 | 55 |
56 #features > li.enabled > .description { | 56 #features > li.enabled > .description { |
57 -webkit-transform:translate3d(100px,0,0); | 57 transform:translate3d(100px,0,0); |
58 } | 58 } |
59 </style> | 59 </style> |
60 <script> | 60 <script> |
61 if (window.testRunner) { | 61 if (window.testRunner) { |
62 testRunner.waitUntilDone(); | 62 testRunner.waitUntilDone(); |
63 testRunner.dumpAsText(); | 63 testRunner.dumpAsText(); |
64 } | 64 } |
65 | 65 |
66 function init() | 66 function init() |
67 { | 67 { |
(...skipping 29 matching lines...) Expand all Loading... | |
97 <b>Spaces</b> lets you group your application windows and banish | 97 <b>Spaces</b> lets you group your application windows and banish |
98 clutter completely. Leopard gives you a space for everything and | 98 clutter completely. Leopard gives you a space for everything and |
99 makes it easy to switch between your spaces. Start by simply | 99 makes it easy to switch between your spaces. Start by simply |
100 clicking the Spaces icon in the Dock. | 100 clicking the Spaces icon in the Dock. |
101 </div> | 101 </div> |
102 </li> | 102 </li> |
103 </ul> | 103 </ul> |
104 <div id="results"></div> | 104 <div id="results"></div> |
105 </body> | 105 </body> |
106 </html> | 106 </html> |
OLD | NEW |