CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效

/* 炫光边框按钮特效 */
.glossy-border-button {
  border: none;
  outline: none;
  padding: 10px 20px;
  color: white;
  background-color: #0069d9;
  font-size: 16px;
  border-radius: 5px;
  position: relative;
  overflow: hidden; /* 确保边框在子元素超出时不显示 */
}
 
.glossy-border-button::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, rgba(255,255,255,0.5), transparent, rgba(255,255,255,0.5));
  border-radius: 9px;
  z-index: -1;
}
 
.glossy-border-button:hover::before {
  animation: hover-effect 2s infinite;
}
 
@keyframes hover-effect {
  0% {
    transform: translateX(-100px) translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(100px) translateY(100px);
    opacity: 1;
  }
}

这段代码实现了一个炫光边框的按钮特效，当鼠标悬停在按钮上时，会触发一个动画，该动画创建了一种光晕烁的视觉效果。这是一个简单而又有趣的视觉效果，可以增强网页中按钮的交互体验。