边框流动

效果

源码

<template>
  <div class="box">
    <h2>CSS</h2>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.box h2 {
  color: #fff;
  font-size: 2em;
  text-shadow: 2px 2px pink;
  z-index: 1;
}
.box::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 120%;
  background: linear-gradient(#00ccff, #d500f9);
  animation: rotate 4s linear infinite;
}
.box::after {
  content: "";
  position: absolute;
  /* 简写用法: 等价于 top:5px; left:5px; bottom:5px; right:5px; */
  inset: 5px;
  background: #0e1538;
  border-radius: 10px;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

实现思路

1. box 伪元素::before 实现渐变背景

.box::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 120%;
  background: linear-gradient(#00ccff, #d500f9);
}

2. box 伪元素::before 实现旋转动画

.box::before {
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

3. box 伪元素::after 盖住渐变背景

.box::after {
  content: "";
  position: absolute;
  /* 简写用法: 等价于 top:5px; left:5px; bottom:5px; right:5px; */
  inset: 5px;
  background: #0e1538;
  border-radius: 10px;
}

4. box 超出隐藏

.box {
  overflow: hidden;
}

5. 文字调到上层

.box h2 {
  z-index: 1;
}