边框旋转特效.html

<div class="rainbow">
  <p>This demo uses a real border with <code>border-image</code>, a background, and finally Houdini to animate.</p>
</div>

<div class="warning">
  <p>⚠️ Your browser does not support <a href="https://web.dev/css-individual-transform-properties/">@property</a> so the animation won’t work<br />Please use Chrome.</p>
</div>

<style>
:root {
  --angle: 45deg;
  --opacity: 0.5;
}
.rainbow {
  width: 400px;
  height: 300px;
  border-radius: 10px;
  padding: 2rem;
  margin: auto;

  display: grid;
  place-content: center;
  text-align: center;

  font-size: 1.5em;

  --border-size: 0.3rem;
  border: var(--border-size) solid transparent;

  /* Paint an image in the border */
  border-image: conic-gradient(
      from var(--angle),
      #d53e33 0deg 90deg,
      #fbb300 90deg 180deg,
      #377af5 180deg 270deg,
      #399953 270deg 360deg
    )
    1 stretch;
  background: rgb(255 255 255 / var(--opacity));
}

/** show a warning in browers that don't support it **/
.warning {
  margin: 2em;
  padding: 1em;
  border: 1px solid #ccc;
}
.warning p {
  margin: 0;
  padding: 0;
  text-align: center;
}
/* Animate when Houdini is available */
@supports (background: paint(houdini)) {
  @property --opacity {
    syntax: "<number>";
    initial-value: 0.5;
    inherits: false;
  }

  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes opacityChange {
    to {
      --opacity: 1;
    }
  }

  @keyframes rotate {
    to {
      --angle: 360deg;
    }
  }

  .rainbow {
    animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
  }

  /* Hide the warning */
  .warning {
    display: none;
  }
}
</style>