首页爱心跳动代码HTML

爱心跳动代码HTML

时间: 2024-11-09 09:11:22 浏览: 56

在HTML中模拟爱心跳动效果通常是通过CSS动画或者JavaScript交互实现的。这里提供一种基础的CSS动画示例，使用`:before`伪元素和关键帧动画（@keyframes）来模拟心脏跳动的效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .heart-breathe { position: relative; width: 100px; height: 100px; background-color: #FF69B4; /* 可根据喜好调整颜色 */ display: inline-block; margin-bottom: 20px; } .heart-breathe::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 80%; height: 80%; background-color: transparent; animation: heartbeat 2s infinite alternate; } @keyframes heartbeat { 0% {background-color: transparent;} 50% {background-color: red;} 100% {background-color: transparent;} } </style> </head> <body> <div class="heart-breathe"></div> <div class="heart-breathe"></div>  </body> </html> ``` 这个代码创建了一个粉色背景的圆圈，然后使用`:before`伪元素和动画效果来让背景颜色在红色和透明之间变化，模拟心脏跳动的过程。

阅读全文