超详细！CSS 代码实现跳动的心形动画

我帮你补全心形CSS动画的完整代码，并添加注释说明： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跳动的心</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #ffe6f2; overflow: hidden; } .heart { position: relative; width: 100px; height: 90px; animation: heartbeat 1.5s infinite; } /* 心形左侧部分 */ .heart:before { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #ff4d6d; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } /* 心形右侧部分 */ .heart:after { position: absolute; content: ""; left: 0; top: 0; width: 50px; height: 80px; background: #ff4d6d; border-radius: 50px 50px 0 0; transform: rotate(45deg); transform-origin: 100% 100%; } /* 心跳动画 */ @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 代码逻辑说明： 1. 使用伪元素:before和:after创建心形的左右两部分 2. 通过border-radius和transform旋转形成心形轮廓 3. 关键帧动画实现缩放效果模拟心跳三条额外注意事项： 1. transform-origin属性控制旋转中心点，这对心形拼接很关键 2. 动画时序控制使用百分比而非固定时间，确保循环流畅 3. 心形颜色可通过修改background值调整，建议使用HSL颜色更易控制明暗 ######[AI写代码神器 | 566点数解答 | 2025-06-06 10:17:14]

服务商

更多选项

快捷项

自定义