爱心跳动代码优化：从基础实现到性能与体验提升

代码分析这段代码实现了一个爱心跳动的动画效果，并且在爱心中间显示文字，文字颜色会发生变化，同时还添加了点击爱心加速跳动的交互效果。代码整体结构清晰，不过有一些可以优化的地方。优化建议 1. 减少代码重复：在 `@keyframes beat` 中，`transform` 属性都包含 `rotate(45deg)`，可以将其提取到 `.heart-container` 的基础样式中，减少重复代码。 2. 提高代码可读性：可以将一些样式值提取为变量，方便修改和维护。 3. 添加浏览器前缀：为了保证动画在不同浏览器中的兼容性，需要添加浏览器前缀。优化后的代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>爱心跳动</title> <style> /* 定义一些常量 */ :root { --heart-color: #ff4d4d; --text-color-1: #ffffff; --text-color-2: #ffd700; --beat-duration: 1.5s; --beat-duration-fast: 1s; --beat-scale: 1.2; --heart-width: 100px; --heart-height: 150px; } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .heart-container { position: relative; transform: rotate(45deg); /* 提取基础旋转样式 */ animation: beat var(--beat-duration) infinite; -webkit-animation: beat var(--beat-duration) infinite; /* 添加浏览器前缀 */ } .heart-container:before, .heart-container:after { content: ""; position: absolute; width: var(--heart-width); height: var(--heart-height); background-color: var(--heart-color); border-radius: 100px 100px 0 0; } .heart-container:before { left: -50px; transform: rotate(-45deg); transform-origin: 100% 100%; } .heart-container:after { top: -50px; transform: rotate(45deg); transform-origin: 0 100%; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-color-1); font-family: "Microsoft YaHei", sans-serif; font-size: 24px; font-weight: bold; text-align: center; line-height: 1.2; z-index: 1; animation: colorChange 3s infinite; -webkit-animation: colorChange 3s infinite; /* 添加浏览器前缀 */ } @keyframes beat { 0%, 100% { transform: scale(1); } 10%, 30%, 50%, 70%, 90% { transform: scale(var(--beat-scale)); } } @-webkit-keyframes beat { 0%, 100% { -webkit-transform: scale(1); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: scale(var(--beat-scale)); } } @keyframes colorChange { 0% { color: var(--text-color-1); } 50% { color: var(--text-color-2); } 100% { color: var(--text-color-1); } } @-webkit-keyframes colorChange { 0% { color: var(--text-color-1); } 50% { color: var(--text-color-2); } 100% { color: var(--text-color-1); } } </style> </head> <body> <div class="heart-container"> <div class="text">何铮<br>我们爱你</div> </div> <script> // 可以在这里添加更多交互效果 document.addEventListener('click', function() { const heart = document.querySelector('.heart-container'); heart.style.animationDuration = '1s'; setTimeout(() => { heart.style.animationDuration = '1.5s'; }, 300); }); </script> </body> </html> ``` 额外注意的逻辑点 1. 浏览器兼容性：虽然添加了 `-webkit-` 前缀，但不同浏览器对动画的支持可能还是存在差异，需要在多种浏览器中进行测试。 2. 动画性能：过多的动画可能会影响页面性能，尤其是在移动设备上。可以考虑减少不必要的动画或者使用硬件加速（如 `transform: translateZ(0)`）来提高性能。 3. 用户交互体验：点击爱心加速跳动的效果可以进一步优化，例如添加音效或者其他视觉反馈，提升用户体验。 ######[AI写代码神器 | 1313点数解答 | 2025-06-11 21:06:30]

服务商

更多选项

快捷项

自定义