css动态渐变 - LiderDong

如gif动图展示，这是一个边框动画效果，本次文章讲解读拆分如何实现这个边框动画效果

具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>css动态渐变</title>
    <style>
      body {
        background-color: black;
      }
      .container {
        background-color: black;
        border-radius: 8px;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 25%;
      }

      .container::before {
        content: '';
        position: absolute;
        left: -10px;
        top: -10px;
        width: calc(100% + 20px); /* calc方法可以用来动态计算长度 */
        height: calc(100% + 20px);
        border-radius: 10px;
        z-index: -1;
        background: repeating-conic-gradient(from var(--range), #0ff, #f0f, #0ff, #ff0, #0f0);
        animation: rotating 4s linear infinite;
      }
      @property --range {
        initial-value: 0deg;
        syntax: '<angle>';
        inherits: false;
      }
      @keyframes rotating {
        0% {
          --range: 0deg;
        }
        100% {
          --range: 360deg;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <div class="container">
        <span></span>
      </div>
    </div>
  </body>
</html>

posted on 2024-04-16 11:28 LiderDong 阅读(13) 评论(0) 收藏举报