curtain-effect-1-ref.html (1351B)
1 <!DOCTYPE html> 2 <html style="margin: 0; padding: 0; z-index: 0"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 </head> 6 <body style="margin: 0; padding: 0; z-index: 0" onload="scrollTo(0,400)"> 7 8 <div style="height: 100vh"> 9 <div style="width: 100%; 10 height: 100vh; 11 position: absolute; 12 top: 0; 13 left: 0; 14 z-index: 2"> 15 <div style="position: absolute; 16 width: 100%; 17 height: 100vh; 18 left: 0; 19 top: 0; 20 z-index: 3"> 21 <div style="position: relative; 22 width: 100%; 23 height: 100%; 24 background-image: linear-gradient(lime, blue);"> 25 </div></div></div></div> 26 27 <div style="height: 100vh; 28 position: relative; 29 background: black;"> 30 <div style="position: absolute; 31 width: 100%; 32 height: 100%; 33 top: 0; 34 left: 0; 35 clip: rect(0, auto, auto, 0);"> 36 <div style="width: 100%; 37 height: 100%; 38 top: 0; 39 left: 0; 40 position: fixed; 41 transform: translateZ(0); 42 z-index: 3"> 43 <div style="position: relative; 44 width: 100%; 45 height: 100%; 46 background-image: linear-gradient(yellow, red);"> 47 </div></div></div></div> 48 </body></html>