[分享]css3按钮切换动画

CSS3是前端开发必备技能之一，它有许多强大的特性，其中之一就是按钮切换动画，可以通过CSS3实现带有切换动画的按钮。/ 定义按钮样式 / .button { display: inlineblock...

CSS3是前端开发必备技能之一，它有许多强大的特性，其中之一就是按钮切换动画，可以通过CSS3实现带有切换动画的按钮。

/* 定义按钮样式 */
.button {
  display: inline-block;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 定义鼠标悬停时的样式 */
.button:hover {
  background-color: #fff;
  color: #333;
  border: 2px solid #333;
}

/* 定义按钮被选中时的样式 */
.button:checked {
  background-color: #FF5722;
  color: #fff;
}

/* 定义按钮被选中时的动画效果 */
.button:checked::before {
  content: "?";
  display: inline-block;
  margin-right: 5px;
  transform: rotate(-360deg);
  transition: all 0.3s ease;
}

/* 定义被选中的按钮的颜色 */
.button-orange:checked {
  background-color: #FF9***;
  color: #fff;
}

/* 定义被选中的按钮的动画效果 */
.button-orange:checked::before {
  content: "?";
  display: inline-block;
  margin-right: 5px;
  transform: rotate(-360deg);
  transition: all 0.3s ease;
} 

在以上CSS代码中，我们可以看到通过定义伪元素`:before`以及`transform`属性，我们可以很容易地实现按钮被选中时的动画效果。这种动画效果不仅可以增加用户体验感，也可以让页面更加生动有趣。

除此之外，我们也可以通过定义不同的类来控制其他颜色的按钮，并给它们定义不同的动画效果。这些按钮之间也可以互相切换，使得页面更加丰富多彩。