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

CHENJIAMIAN PRO

已于 2023-06-05 17:06:40 修改

阅读量2.2k

点赞数 5

分类专栏： Web 文章标签： css html 前端

于 2023-06-05 16:55:52 首次发布

本文链接：https://blog.csdn.net/a571574085/article/details/131051636

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在线示例

Fullscreen Red Alert

代码

<!DOCTYPE html>
<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>

CHENJIAMIAN PRO

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
CSS全屏红色告警边缘红色渐变闪烁全屏告警效果

在线示例Fullscreen Red Alert代码<!DOCTYPE html><html> <head> <title>Fullscreen Red Alert</title> <style> html, body { margin: 0; padding: 0; overflow: hidden; } :r
复制链接

扫一扫