小按钮大宇宙，分享几个宇宙风格的按钮动效，让你爱上CSS

在这里，我将提供两个简单而又炫目的CSS按钮动效，它们都是以宇宙风格设计的。

1. 星辰飘落的按钮:

HTML:

<button class="star-button">点击我</button>

CSS:

.star-button {
  border: none;
  background: none;
  position: relative;
  outline: none;
  font-size: 20px;
  color: #FFF;
  cursor: pointer;
  padding: 10px 20px;
  overflow: hidden;
  box-sizing: border-box;
}
 
.star-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: #F7D674;
  border-radius: 50%;
  opacity: 0;
  animation: star-animation 2s infinite;
}
 
.star-button:hover::after {
  animation: none;
}
 
@keyframes star-animation {
  0% {
    transform: translate(-50%, -100%) rotate(0deg);
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    transform: translate(-50%, 0) rotate(720deg);
    opacity: 0;
    width: 1000px;
    height: 1000px;
  }
}

2. 火焰般的按钮:

HTML:

<button class="flame-button">点击我</button>

CSS:

.flame-button {
  position: relative;
  background: #f7d674;
  border: none;
  padding: 10px 20px;
  outline: none;
  font-size: 20px;
  color: #FFF;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}
 
.flame-button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  background: #F7D674;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 50%;
  animation: flame-animation 2s infinite;
}
 
.flame-button:hover::before {
  animation: none;
}
 
@keyframes flame-animation {
  0% {
    transform: translate(-50%, 100%) rotate(0deg);
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    transform: translate(-50%, 0) rotate(720deg);
    opacity: 0;
    width: 1000px;
    height: 1000px;
  }
}

这两个按钮动效都是通过CSS的@keyframes规则和animation属性实现的，它们都包含一个动画，在鼠标悬停时停止动画，给用户一个静态的按钮感觉。这种设计模仿了单一按钮在不同状态下的不同视觉效果，体现了CSS的灵活性和强大功能。