演示 💖 🔄 ⚽️ 🎈 🎉 📱 跑马灯效果 彩虹文字效果 打字机动画效果 CSS 动画提供广泛的可能性来创建各种有趣的视觉效果。以下是一些使用不同 CSS3 动画特性创造的示例。你可以像之前一样将这些样式写入 HTML 页面中的 <style> 标签，或者应用到特定的 HTML 元素上。 代码 心跳效果 使用 @keyframes 和 animation 创建一个心跳效果。 <style> @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.25); } 50% { transform: scale(1); } 75% { transform: scale(1.25); } 100% { transform: scale(1); } } .heartbeat { display: inline-block; animation: heartbeat 1s infinite; } </style> <div class="heartbeat">💖</div> 旋转效果 创建一个元素不停旋转的动画。 <style> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { display: inline-block; animation: spin 2s linear infinite; } </style> <div class="spinner">🔄</div> 弹跳效果 使文字或者图片如同弹球一样弹跳。 <style>...