CSS3实现的分享图标按钮动画特效代码

/* 定义分享按钮的基本样式 */
.share-button {
  display: inline-block;
  background-color: #333;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 平滑的背景颜色过渡效果 */
}
 
/* 鼠标悬停时改变按钮背景颜色 */
.share-button:hover {
  background-color: #555;
}
 
/* 实现一个简单的旋转动画 */
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
/* 应用旋转动画到分享按钮 */
.share-button:active {
  animation: rotateAnimation 0.5s ease-in-out;
}

这段代码定义了一个分享按钮的基本样式，并为其添加了鼠标悬停和激活（点击）状态下的动画效果。旋转动画在按钮被点击时触发，为用户提供了视觉上的反馈。