css实现边框彩虹跑马灯效果

news2024/11/24 23:03:14

效果展示

在这里插入图片描述

代码实战

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>border ranbom</title>
  <style>
    img {
      width: 380px;
    }

    .box {
      /* padding: 4px; */
      display: flex;
      align-items: center;
      justify-content: center;
      height: 400px;
      width: 400px;
      margin: auto;
      border: solid 1px;
      text-align: center;
    }

    .horse_run {
      background-image: linear-gradient(90deg,
          rgba(196, 233, 64, 0) 0%,
          green 40%,
          orange 40% 70%,
          red 70% 100%),
        linear-gradient(0deg,
          red 30%,
          orange 30% 60%,
          green 60%,
          rgba(196, 233, 64, 0) 100%),
        linear-gradient(-90deg,
          rgba(196, 233, 64, 0) 0%,
          green 40%,
          orange 40% 70%,
          red 70% 100%),
        linear-gradient(0deg,
          rgba(196, 233, 64, 0) 0%,
          green 40%,
          orange 40% 70%,
          red 70% 100%);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
      background-position: -100px 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px 0px;
      animation: moveLine 6s infinite linear;
      /* height: calc(100% - 2px); */
      /* padding: 0px; */
      background-clip: content-box;
    }

    @keyframes moveLine {
      0% {
        background-position: -100px 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px 0px;
      }

      5% {
        background-position: 0px 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px -100px;
      }

      30% {
        background-position: 100% 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px -100px;
      }

      35% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) 0px, calc(100% + 100px) calc(100% - 0px), 0px -100px;
      }

      50% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) 100%, calc(100% + 100px) calc(100% - 0px), -100px -100px;
      }

      55% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), 100% calc(100% - 0px), -100px calc(100% + 100px);
      }

      80% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), 0px calc(100% - 0px), 0px calc(100% + 100px);
      }

      85% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), -100px calc(100% - 0px), 0px 100%;
      }

      100% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), -100px calc(100% - 0px), 0px 0px;
      }
    }
  </style>
</head>

<body>
  <div class="box horse_run">
    <img alt="图片"
      src="https://profile-avatar.csdnimg.cn/16a636bfaafa4441b119d1c92e27651e_tianxintiandisheng.jpg!1">
  </div>

</body>

</html>