[分享]css3按钮上闪烁的星星

CSS3按钮上闪烁的星星是如何实现的呢？

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  background-color: #f26d6d;
  border-radius: 20px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.button:hover {
  background-color: #ff4141;
}
.button:before {
  content: "f005 f005 f005 f005 f005";
  font-family: FontAwesome;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  transform: scale(0.3);
}
.button:hover:before {
  opacity: 1;
  transform: scale(1);
}
.button:before {
  color: #fff;
  animation: blink 2s infinite;
}
@keyframes blink {
  0%, 50%, 100% {
    opacity: 0;
  }
  25%, 75% {
    opacity: 1;
  }
} 

以上便是代码实现的具体细节，可以看出，在按钮的 :hover 伪类下，使用 :before 伪元素实现了星星的闪烁效果。同时，通过 opacity 变换和动画效果，让星星出现和消失，形成了闪烁的效果。

需要指出的是，使用 Font Awesome 字体，通过 content 插入的内容就是星星，使用 :before 伪元素来定位星星并进行闪烁效果的渲染。

以上就是本篇文章关于 CSS3 按钮上闪烁的星星的实现方法以及具体代码的介绍。希望能够对大家了解星星闪烁效果的实现方法有所帮助！