/* 定义动画效果 */
@keyframes color-change {
0% { background-color: red; } /* 开始是红色 */
50% { background-color: green; } /* 中途变为绿色 */
100% { background-color: blue; } /* 最终成为蓝色 */
}
/* 添加动画到元素上 */
.box {
width: 100px;
height: 100px;
animation: color-change 2s ease-in-out infinite; /* 播放动画，无限循环 */
}如上所述，大家可以使用CSS添加动画效果。首先，通过@keyframes定义动画效果的开始和结束状态。接着，大家将动画应用到元素中。在上面的例子中，大家定义了一个.box类并将动画应用到该类。动画名称为color-change，持续时间为2秒，并通过ease-in-out定义了动画的运动曲线。最后，大家通过infinite使动画无限循环播放。
另一个动态CSS的例子是使用:hover伪类：
/* 定义一个按钮 */
.button {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
transition: background-color 0.5s;
}
/* 鼠标悬浮时改变背景色 */
.button:hover {
background-color: red;
}在上面的例子中，大家定义了一个.button类，它有一个蓝色的背景和白色的文字。当鼠标悬浮在按钮上时，大家使用:hover伪类改变了按钮的背景色为红色。使用transition属性为按钮的背景色添加过渡效果，让背景色的变化更加平滑。
动态地使用CSS可以为网页增添一些趣味性和交互性。通过使用动态CSS，大家可以为网页设置动画、悬浮效果等等，让网页更加引人注目。希望这篇文章能够帮助你更好地理解CSS的动态用法！