css3动画效果包括 |控制button样式css3

/* 旋转 */
.rotate {
animation: rotate 2s infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 缩放 */
.scale {
animation: scale 2s infinite;
}
@keyframes scale {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
/* 移动 */
.move {
animation: move 2s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
/* 渐变 */
.fade {
animation: fade 2s infinite;
}
@keyframes fade {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}

以上是一些基本的CSS3动画效果，通过改变动画的属性和关键帧，可以实现更加复杂的动画效果，如弹跳、淡入淡出、闪烁等。

需要注意的是，在使用动画效果时要注意性能问题，避免过多的动画效果导致页面加载缓慢或卡顿，同时还要为无法支持CSS3的旧版浏览器提供备用方案。