CSS3创建一个旋转可变色按钮，阿里资深前端开发带你入门Framework

/* 定义一个旋转按钮的基本样式 */
.rotating-button {
  display: inline-block;
  padding: 15px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px #2980b9;
  text-shadow: 0 -1px #674ea7;
  transform-origin: center;
  animation: rotation 5s infinite linear;
}
 
/* 定义按钮的旋转动画 */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
 
/* 定义鼠标悬停时按钮的颜色变化 */
.rotating-button:hover {
  background-color: #34495e;
}
 
/* 定义按钮在不同状态下的颜色变化，这里只展示了一个状态，可以根据需要添加更多状态 */
.rotating-button:active {
  background-color: #2980b9;
  box-shadow: 0 2px #276c91;
  transform: translateY(4px);
}

这段代码定义了一个旋转的按钮，按钮在不同状态下的颜色会有所变化，并且按钮的旋转动画是通过CSS3的@keyframes规则实现的，无需使用JavaScript。按钮在鼠标悬停时背景色会变深，在点击（激活）时会有一个轻微的上移效果，并且颜色有所变化，为用户界面增加了活力和交互性。