| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| position: absolute; |
| transform-origin: 0% 0%; |
| offset-anchor: 0% 0%; |
| } |
| .closed { |
| offset-path: path('M 0 0 L 500 0 Z'); |
| } |
| .open { |
| offset-path: path('M 0 0 L 1000 0'); |
| } |
| #div1 { |
| offset-distance: -3700px; |
| transform: translate3d(0px, 10px, 1px); |
| } |
| #div2 { |
| offset-distance: 200px; |
| transform: translate3d(0px, 20px, 2px); |
| } |
| #div3 { |
| offset-distance: 4100px; |
| transform: translate3d(0px, 30px, 3px); |
| } |
| #div4 { |
| offset-distance: -370%; |
| transform: translate3d(0px, 40px, 4px); |
| } |
| #div5 { |
| offset-distance: 20%; |
| transform: translate3d(0px, 50px, 5px); |
| } |
| #div6 { |
| offset-distance: 410%; |
| transform: translate3d(0px, 60px, 6px); |
| } |
| #div7 { |
| offset-distance: -3700px; |
| transform: translate3d(0px, 70px, 7px); |
| } |
| #div8 { |
| offset-distance: 200px; |
| transform: translate3d(0px, 80px, 8px); |
| } |
| #div9 { |
| offset-distance: 4100px; |
| transform: translate3d(0px, 90px, 9px); |
| } |
| #div10 { |
| offset-distance: -370%; |
| transform: translate3d(0px, 100px, 10px); |
| } |
| #div11 { |
| offset-distance: 20%; |
| transform: translate3d(0px, 110px, 11px); |
| } |
| #div12 { |
| offset-distance: 410%; |
| transform: translate3d(0px, 120px, 12px); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="closed" id="div1">div1</div> |
| <div class="closed" id="div2">div2</div> |
| <div class="closed" id="div3">div3</div> |
| <div class="closed" id="div4">div4</div> |
| <div class="closed" id="div5">div5</div> |
| <div class="closed" id="div6">div6</div> |
| <div class="open" id="div7">div7</div> |
| <div class="open" id="div8">div8</div> |
| <div class="open" id="div9">div9</div> |
| <div class="open" id="div10">div10</div> |
| <div class="open" id="div11">div11</div> |
| <div class="open" id="div12">div12</div> |
| </body> |
| </html> |
