CSS全屏红色告警边缘红色渐变闪烁全屏告警效果

本文介绍: 在线示例Fullscreen Re d Ale rt 代码<!DOCTYPE html><html> <head> <title>Fullscreen Red Alert</title> <style> html, body { margin: 0; padding: 0; overflow: hidden; } :r

Fullscreen Red Alert

<!DOCTYPE html&gt;
<html>
  <head>
    <title>Fullscreen Red Alert</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      :root {
        --alert-size: 120px;
      }

      #alertOverlay::before,
      #alertOverlay::after {
        content: "";
        position: absolute;
        width: var(--alert-size);
        height: 100%;
      }

      #alertOverlay > div::before,
      #alertOverlay > div::after {
        content: "";
        position: absolute;
        width: 100%;
        height: var(--alert-size);
      }

      #alertOverlay::before {
        background: linear-gradient(to right, red, transparent);
        top: 0;
        left: 0;
        transform: rotate(0deg);
      }

      #alertOverlay::after {
        background: linear-gradient(to left, red, transparent);
        top: 0%;
        left: 100%;
        transform: rotate(0deg) translate(calc(-1 * var(--alert-size)), 0px);
      }

      #alertOverlay > div::before {
        background: linear-gradient(to top, red, transparent);
        top: 0;
        left: 0;
        transform: rotate(180deg);
      }

      #alertOverlay > div::after {
        background: linear-gradient(to top, red, transparent);
        top: 100%;
        left: 0;
        transform: rotate(0deg) translate(0px, calc(-1 * var(--alert-size)));
      }

      #alertOverlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        opacity: 1;
        transition: opacity 0.5s;
        pointer-events: none;
        z-index: 1;
      }

      .alert-active {
        animation: blink 1s infinite;
      }

      @keyframes blink {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="alertOverlay">
      <div></div>
    </div>

    <script>
      // 监听告警状态变化
      function setAlertState(active) {
        var alertOverlay = document.getElementById("alertOverlay");
        if (active) {
          alertOverlay.classList.add("alert-active");
        } else {
          alertOverlay.classList.remove("alert-active");
        }
      }

      // 设置告警状态为激活
      setAlertState(true);
    </script>
  </body>
</html>