首页写一个爱心跳动代码，用html

写一个爱心跳动代码，用html

时间: 2023-05-29 12:05:03 浏览: 98

和css实现 HTML代码： <!DOCTYPE html> <html> <head> <title>爱心跳动</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="heart"></div> </body> </html> CSS代码： .heart { width: 100px; height: 100px; background-color: #ff5b5b; position: relative; margin: 0 auto; animation: heartbeat 1s linear infinite; transform-origin: center; } .heart:before, .heart:after { content: ""; position: absolute; background-color: #ff5b5b; } .heart:before { top: 0; left: 50px; width: 50px; height: 80px; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { top: 0; right: 50px; width: 50px; height: 80px; border-radius: 50px 50px 0 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(0.75); } 50% { transform: scale(1); } 75% { transform: scale(0.75); } 100% { transform: scale(1); } } 解释说明： HTML中只有一个div标签，class为"heart"，这个div就是爱心的主体。 CSS样式中，我们设置了爱心的宽高、背景颜色、位置、动画等。其中，transform-origin属性是设置变形的基点，这里设置为中心点；animation属性是设置动画的名称、时间、速度等；:before和:after是伪类，用于实现爱心的两个半边。最后，在@keyframes中定义了心跳动画的变化过程，包括缩放大小和变化时间。

阅读全文