【css】光雾边框动画

最新推荐文章于 2023-11-27 14:09:07 发布

KatyLight

最新推荐文章于 2023-11-27 14:09:07 发布

阅读量239

点赞数

分类专栏：样式文章标签： css 动画 css3

本文链接：https://blog.csdn.net/qq_33014695/article/details/125100978

版权

样式专栏收录该内容

32 篇文章 0 订阅

订阅专栏

会有动画效果，光雾的渐变动画。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    :root {
      --shadow-size-w: 200px;
      --shadow-size-h: 100px;
    }

    body {
      background: black;
    }

    .pill {
      position: relative;
      height: 60px;
      flex: 1;
      margin: 10px;


    }

    .pill > .content {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border-radius: 12px;
      overflow: hidden;
      display: flex;

    }

    .pill > .content > .key {
      flex: 1;
      color: #c8b1e7;

      font-size: 18px;
      display: flex;
      overflow: hidden;
      flex-direction: row; /*默认也是row可以不写*/
      align-items: center; /*这种情况是垂直居中*/
      justify-content: center; /*这种情况是水平居中*/
      background-color: #732e96;


    }

    .pill > .content > .key > div {

    }

    .pill > .content > .key > div:after {
      content: ":";
    }

    .pill > .content > .value {
      margin-left: 2px;
      flex: 1;
      background-color: #500561;

      display: flex;
      overflow: hidden;
      flex-direction: row; /*默认也是row可以不写*/
      align-items: center; /*这种情况是垂直居中*/
      justify-content: center; /*这种情况是水平居中*/
    }

    .pill > .content > .value > div {
      color: #e200ff;
      font-size: 36px;
      font-weight: bolder;
    }

    .pill > .content > .value > div:after {
      content: "%";
      font-size: 12px;
      font-weight: normal;
    }

    .pill:before {
      content: '';
      position: absolute;
      z-index: -1;
      display: block;
      border-radius: 12px;
      left: -2px;
      top: -2px;
      bottom: -2px;
      right: -2px;
      background-image: radial-gradient(#c100ff 30%, rgba(65, 157, 129, 0.13) 60%, transparent), linear-gradient(#7c4393, #4d15f5);
      background-size: var(--shadow-size-w) var(--shadow-size-h), 100% 100%;
      background-repeat: no-repeat;
      background-position: calc(var(--shadow-size-w) / -2) calc(var(--shadow-size-h) / -2), 0 0;
      animation: infinite 3s run linear;
    }

    @keyframes run {
      0% {
        background-position: calc(var(--shadow-size-w) / -2) calc(var(--shadow-size-h) / -2), 0 0;
      }
      25% {
        background-position: calc(100% + calc(var(--shadow-size-w) / 2)) calc(var(--shadow-size-h) / -2), 0 0;
      }
      50% {
        background-position: calc(100% + calc(var(--shadow-size-w) / 2)) calc(100% + calc(var(--shadow-size-h) / 2)), 0 0;

      }
      75% {
        background-position: calc(var(--shadow-size-w) / -2) calc(100% + calc(var(--shadow-size-h) / 2)), 0 0;

      }
      100% {
        background-position: calc(var(--shadow-size-w) / -2) calc(var(--shadow-size-h) / -2), 0 0;

      }
    }
  </style>
</head>
<body>
<div style="width: 800px;margin: 0 auto;display: flex">
  <div class="pill">
    <div class="content">
      <div class="key">
        <div>药丸</div>
      </div>
      <div class="value">
        <div>99</div>
      </div>
    </div>
  </div>
  <div class="pill">
    <div class="content">
      <div class="key">
        <div>药丸</div>
      </div>
      <div class="value">
        <div>99</div>
      </div>
    </div>
  </div>
  <div class="pill">
    <div class="content">
      <div class="key">
        <div>药丸</div>
      </div>
      <div class="value">
        <div>99</div>
      </div>
    </div>
  </div>
  <div class="pill">
    <div class="content">
      <div class="key">
        <div>药丸</div>
      </div>
      <div class="value">
        <div>99</div>
      </div>
    </div>
  </div>
</div>


</body>
</html>