跳动爱心动画代码优化：从基础到完美适配多浏览器

这段代码实现了一个跳动的爱心动画效果，整体代码逻辑清晰，结构完整。不过有一些可以优化的地方：优化建议 1. CSS变量的使用：可以使用CSS变量来管理颜色和尺寸，这样方便后续修改。 2. 减少重复代码：可以将一些重复的样式提取出来，提高代码的可维护性。 3. 添加浏览器前缀：为了确保动画在不同浏览器中都能正常显示，添加浏览器前缀。优化后的代码 ```html <!DOCTYPE html> <html> <head> <title>跳动的爱心</title> <style> /* 使用CSS变量管理颜色和尺寸 */ :root { --heart-color: #ff4d4d; --heart-width: 100px; --heart-height: 90px; --half-heart-width: 52px; --half-heart-height: 80px; } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .heart { position: relative; width: var(--heart-width); height: var(--heart-height); /* 添加浏览器前缀 */ -webkit-animation: heartbeat 1.5s ease-in-out infinite; -moz-animation: heartbeat 1.5s ease-in-out infinite; -o-animation: heartbeat 1.5s ease-in-out infinite; animation: heartbeat 1.5s ease-in-out infinite; } /* 提取重复样式 */ .heart:before, .heart:after { content: ""; position: absolute; top: 0; width: var(--half-heart-width); height: var(--half-heart-height); border-radius: 50px 50px 0 0; background: var(--heart-color); } .heart:before { left: calc(var(--half-heart-width)); transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } /* 添加浏览器前缀 */ @-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(0.75); } 20% { -webkit-transform: scale(1); } 40% { -webkit-transform: scale(0.75); } 60% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0.75); } } @-moz-keyframes heartbeat { 0% { -moz-transform: scale(0.75); } 20% { -moz-transform: scale(1); } 40% { -moz-transform: scale(0.75); } 60% { -moz-transform: scale(1); } 100% { -moz-transform: scale(0.75); } } @-o-keyframes heartbeat { 0% { -o-transform: scale(0.75); } 20% { -o-transform: scale(1); } 40% { -o-transform: scale(0.75); } 60% { -o-transform: scale(1); } 100% { -o-transform: scale(0.75); } } @keyframes heartbeat { 0% { transform: scale(0.75); } 20% { transform: scale(1); } 40% { transform: scale(0.75); } 60% { transform: scale(1); } 100% { transform: scale(0.75); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 额外注意的逻辑点 1. 在使用CSS变量时，要确保变量名的命名具有可读性和语义性，方便后续维护。 2. 添加浏览器前缀时，要注意不同浏览器前缀的语法和使用场景，确保动画在各个浏览器中都能正常显示。 3. 对于动画的时间和缩放比例，可以根据实际需求进行调整，以达到不同的动画效果。 ######[AI写代码神器 | 1156点数解答 | 2025-07-15 14:59:44]

服务商

更多选项

快捷项

自定义