超简单！HTML+CSS实现跳动绿色爱心动画

# 跳动的绿色爱心代码以下是一个使用HTML和CSS创建的跳动绿色爱心动画： ```html <!DOCTYPE html> <html> <head> <style> .heart { width: 100px; height: 90px; position: relative; margin: 100px auto; animation: beat 1s infinite; } .heart:before, .heart:after { content: ""; position: absolute; top: 0; width: 50px; height: 80px; background: #00ff00; border-radius: 50px 50px 0 0; } .heart:before { left: 50px; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes beat { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 40% { transform: scale(1); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` ## 代码说明： 1. 使用CSS伪元素`:before`和`:after`创建爱心的两个半圆部分 2. 通过`transform: rotate()`旋转这两个半圆形成爱心形状 3. 使用`@keyframes`动画实现跳动效果，通过`scale()`改变大小 4. 色设置为绿色(`#00ff00`) ## 注意事项： 1. 动画的节奏可以通过调整`@keyframes`中的百分比和时间来控制 2. 爱心的颜色可以通过修改`background`属性值来改变 3. 爱心的尺寸可以通过调整`width`和`height`属性来改变 ######[AI写代码神器 | 439点数解答 | 2025-03-31 16:55:27]

服务商

更多选项

快捷项

自定义