CSS3 @keyframes 动画：颜色变化、背景旋转与放大缩小
在CSS中，@keyframes 是一个强大的工具，它允许我们创建复杂的动画效果。动画会在 2 秒内循环播放，并在不同的时间点改变盒子的背景颜色和变换（旋转和缩放）在 0% 的时间点，盒子的背景颜色是绿色（#4CAF50），没有进行旋转和缩放。
在 25% 的时间点，盒子的背景颜色变为红色（#F44336），同时旋转了 90 度并放大了 10%。
在 50% 的时间点，盒子的背景颜色变为绿色（#0F9D58），旋转了 180 度并回到了初始大小。
在 75% 的时间点，盒子的背景颜色变为蓝色（#00BCD4），旋转了 270 度并再次放大了 10%。
在 100% 的时间点（也就是动画结束时），盒子的背景颜色回到了初始的绿色（#4CAF50），旋转了 360 度（即回到初始位置）并回到了初始大小。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>keyframes 动画：颜色变化、背景旋转与放大缩小</title>
<style>
.animated-box{
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 50%; /* 圆形盒子 */
margin: 50px auto; /* 居中显示 */
animation: colorRotateScale 2s infinite; /* 应用动画 */
}
/* 定义关键帧动画 */
@keyframes colorRotateScale{
0%{
background-color: #4CAF50; /* 初始颜色 */
transform: rotate(0deg) scale(1); /* 初始旋转角度和大小 */
}
25%{
background-color: #F44336; /* 颜色变化 */
transform: rotate(90deg) scale(1.1); /* 旋转90度并放大 */
}
50%{
background-color: #0F9D58; /* 颜色变化 */
transform: rotate(180deg) scale(1); /* 旋转180度并回到初始大小 */
}
75%{
background-color: #00BCD4; /* 颜色变化 */
transform: rotate(270deg) scale(1.1); /* 旋转270度并放大 */
}
100%{
background-color: #4CAF50; /* 回到初始颜色 */
transform: rotate(360deg) scale(1); /* 旋转360度并回到初始大小 */
}
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>预览：
还没有留言，还不快点抢沙发？