1. 弹性动画
使用CSS关键帧动画实现平滑的弹性效果。
.bounce-demo { animation: bounce 1s infinite; } @keyframes bounce {
0%, 100% { transform: translateY(0); } 50% { transform:
translateY(-50px); } }
2. 波浪效果
使用渐变和旋转动画创建流动的波浪效果。
.wave-demo::before { content: ''; position: absolute; width: 200%;
height: 200%; background: radial-gradient(circle, transparent 30%,
rgba(255,255,255,0.2) 70%); animation: wave 8s linear infinite; }
3. 3D翻转效果
使用CSS 3D变换实现卡片翻转动画。
正面
背面
.flip-card { transform-style: preserve-3d; transition: transform 0.8s;
} .flip-demo:hover .flip-card { transform: rotateY(180deg); }