流光动画边框css源码

流光动画边框css源码

演示

源码

html

[lv]

<div class="border-style-3">
QQ资源吧m.qqzy8.com
</div>

[/lv]

css

[lv]

@keyframes border-style-3 {
  0%,100% {
    background-position:0%,50%;
  }
  50% {
    background-position:100%,50%;
  }
}

.border-style-3 {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 10px;
  background-color: white;

  /**
   * 居中
   */
  display: flex;
  justify-content: center;
  align-items: center;

  &::before {
    content: '';
    position: absolute;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 10px;
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
    background-size: 300%;
    z-index: -1;
    animation: border-style-3 5s infinite;
  }

}

[/lv]