OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 | 5 |
6 div { | |
pdr.
2015/10/30 00:52:04
Was this needed?
Eric Willigers
2015/11/20 07:49:53
With parent width 800px, the default transform-ori
| |
7 width: 800px; | |
8 } | |
9 | |
6 span { | 10 span { |
7 position: absolute; | 11 position: absolute; |
8 width: 120px; | 12 width: 120px; |
9 line-height: 120px; | 13 line-height: 120px; |
10 text-align: center; | 14 text-align: center; |
11 color: yellow; | 15 color: yellow; |
12 } | 16 } |
13 | 17 |
14 #span1 { | 18 #span1 { |
15 z-index: 2; | 19 z-index: 2; |
16 left: 50px; | 20 left: 50px; |
17 top: 50px; | 21 top: 50px; |
18 background: red; | 22 background: red; |
19 } | 23 } |
20 | 24 |
21 #span2 { | 25 #span2 { |
22 z-index: 1; | 26 z-index: 1; |
23 left: 100px; | 27 left: 100px; |
24 top: 100px; | 28 top: 100px; |
25 background: green; | 29 background: green; |
26 } | 30 } |
27 | 31 |
28 #span3 { | 32 #span3 { |
29 left: 150px; | 33 left: 150px; |
30 top: 150px; | 34 top: 150px; |
31 background: blue; | 35 background: blue; |
32 } | 36 } |
33 | 37 |
34 #div1 { | 38 #div1 { |
35 motion-path: path('M0,0'); | 39 motion-path: path('M400,0'); |
36 } | 40 } |
37 | 41 |
38 #div2 { | 42 #div2 { |
39 motion-path: none; | 43 motion-path: none; |
40 } | 44 } |
41 | 45 |
42 </style> | 46 </style> |
43 </head> | 47 </head> |
44 <body> | 48 <body> |
45 | 49 |
46 <div id="div1"> | 50 <div id="div1"> |
47 <span id="span1">First</span> | 51 <span id="span1">First</span> |
48 </div> | 52 </div> |
49 <div id="div2"> | 53 <div id="div2"> |
50 <span id="span2">Second</span> | 54 <span id="span2">Second</span> |
51 </div> | 55 </div> |
52 <div id="div3"> | 56 <div id="div3"> |
53 <span id="span3">Third</span> | 57 <span id="span3">Third</span> |
54 </div> | 58 </div> |
55 | 59 |
56 </body> | 60 </body> |
57 </html> | 61 </html> |
OLD | NEW |