以下是一个示例，演示如何使用 CSS3 创建多个不同的动画效果。这里使用了 @keyframes 规则，并通过 CSS 类来应用不同的动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple CSS Animations</title>
<style>
/* 公用样式 */
.animated-element {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 10px;
display: inline-block;
border-radius: 5px;
}
/* 旋转动画 */
.rotate {
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 缩放动画 */
.scale {
animation: scale 1.5s infinite alternate;
}
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
/* 渐变动画 */
.fade {
animation: fade 2s alternate infinite ease-in-out;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
</style>
</head>
<body>
<div class="animated-element rotate"></div>
<div class="animated-element scale"></div>
<div class="animated-element fade"></div>
</body>
</html>
这个例子中定义了三个不同的动画效果：旋转、缩放和渐变。每个动画都有自己的 @keyframes 规则，并通过添加相应的 CSS 类（.rotate、.scale、.fade）来将动画应用到不同的元素上。您可以根据需要调整动画的持续时间、缓动函数和其他属性。
这只是一个基本的示例，实际上您可以根据具体的设计需求和创意添加更多的动画效果。
?
?