css 屏幕四周报警提示

as_jopo

于 2024-07-16 09:37:02 发布

阅读量440

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/AS_JOPO/article/details/140457007

版权

屏幕四周出现律动的红色边框，产生报警提示的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Screen Edge Warning</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    @keyframes colorChange {
      from {
        box-shadow: inset 0 0 0 10px red; /* 红色轮廓 */
      }
      to {
        box-shadow: inset 0 0 0 5px darkred; /* 红色轮廓 */
      }
    }
    .container div{
      position: relative;
      border-radius: 10px;

      float: left;
      margin: 20px;
      padding: 10px;
      height: 100px;
      width: 100px;

    }
    /* 应用动画到元素 */
    .animated-box {
      animation: colorChange 1s infinite alternate; /* 应用动画 */
    }

    @keyframes colorChange2 {
      from {
       outline: 10px red solid;
      }
      to {
        outline: 5px darkred solid;
      }
    }

    .animated-box2 {
      animation: colorChange2 1s infinite alternate; /* 应用动画 */
    }
    @keyframes colorChange3 {
      from {
        box-shadow: inset 0 0 20px 15px red;
      }
      to {
        box-shadow: inset 0 0 10px 7px red;
      }
    }

    .animated-box3 {
      animation: colorChange3 1s infinite alternate; /* 应用动画 */

    }
    body{
      animation: colorChange3 1s infinite alternate; /* 应用动画 */

    }



    .animated-box4::before {
      content: '';
      position: absolute;
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px;
      z-index: -1;
      background: radial-gradient(circle, red, #ffa73b);
      border-radius: inherit;
      box-shadow: 0 0 20px 15px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body >
<div class="container">
  <div class="animated-box">box-shadow</div>
  <div class="animated-box2">outline</div>
  <div class="animated-box3">渐变</div>
</div>


<script>
</script>
</body>
</html>