CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效

以下是实现两款流光溢彩的炫 Button 的 CSS 代码：

解法一：

.btn-ellipse {
  position: relative;
  background: none;
  border: 2px solid #00FFE0;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 18px;
  color: #00FFE0;
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
 
.btn-ellipse:hover {
  border-color: #00FFE0;
  background: linear-gradient(45deg, #00FFE0, #00FFE0);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: moveGrad 2s infinite alternate ease-in-out;
}
 
@keyframes moveGrad {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
}

解法二：

.btn-glitch {
  position: relative;
  background: #00FFE0;
  border: 2px solid #00FFE0;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 18px;
  color: #00FFE0;
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
 
.btn-glitch:hover {
  border-color: #00FFE0;
  background: linear-gradient(45deg, #00FFE0, #00FFE0);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: moveGrad 2s infinite alternate ease-in-out;
}
 
@keyframes moveGrad {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
}

这两种解法都是使用 CSS 的 animation 属性和 @keyframes 关键字来创建流光溢彩的效果。解法一是通过改变背景位置来实现移动的视觉效果，而解法二则是通过改变背景颜色的不透明度来实现同样的效果。这两种方法都能很好地展示流光溢彩的按钮效果，并且代码简洁，易于理解。