1589800-1.html (941B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <style> 6 #parent { 7 transform: rotateZ(1deg); 8 position: absolute; 9 opacity: 0.5; 10 overflow-x: hidden; 11 } 12 13 #child { 14 width: 10px; 15 height: 10px; 16 } 17 18 .blend { 19 mix-blend-mode: color-burn; 20 } 21 </style> 22 </head> 23 24 <body> 25 <div id="parent"> 26 <div id="child">a</div> 27 </div> 28 <div> 29 <div id="blend">a</div> 30 </div> 31 <script type="text/javascript"> 32 function modify() { 33 var e = document.getElementById("child"); 34 e.style.backgroundColor = "red"; 35 setTimeout(addBlend, 0); 36 } 37 38 function addBlend() { 39 var e = document.getElementById("blend"); 40 e.classList.add("blend"); 41 } 42 43 // setTimeout(modify, 3000); 44 window.addEventListener("MozAfterPaint", modify); 45 </script> 46 </body> 47 </html>