CSS绚烂效果示例程序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课-CSS绚烂效果示例程序</title>
    <style>
      .hallucination-effect {
        background-image: url(/u/201909/mysnvmktgl.jpg);
        background-size: cover;
        background-position: center;
      }

@supports (mix-blend-mode: multiply) {
        .hallucination-effect {
          position: relative;
          overflow: hidden;
          background-color: magenta;
          background-blend-mode: screen;
        }
        .hallucination-effect:before, .hallucination-effect:after {
          display: block;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: inherit;
          mix-blend-mode: multiply;
          transform: scale(1.05);
        }
        .hallucination-effect:before {
          background-color: yellow;
          background-blend-mode: screen;
          transform-origin: top left;
        }
        .hallucination-effect:after {
          background-color: cyan;
          background-blend-mode: screen;
          transform-origin: bottom right;
        }
      }
    </style>
</head>
<body>
<div class="hallucination-effect" style="width:680px;height:450px;max-width:100%;"></div>
</body>
</html>