发布时间:2025-12-10 13:11:27 浏览次数:17
今天我们来学习如何制作一个HTML爱心会动的代码!
/*首先,我们先来看一下代码*/.heart {position: relative;width: 100px;height: 90px;transform: rotate(45deg);margin: 20px;animation: beat 1s ease-in-out infinite;}.heart:before,.heart:after {content: "";position: absolute;top: 0;left: 50px;width: 50px;height: 80px;background-color: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);}.heart:after {left: 0;border-radius: 0 0 50px 50px;}/*接下来是动画部分的代码*/@keyframes beat {0% {transform: scale(1) rotate(45deg);}50% {transform: scale(0.6) rotate(45deg);}100% {transform: scale(1) rotate(45deg);}}我们可以看到上述代码使用了:before和:after伪元素来绘制出红色的心形。同时,我们还定义了一个名为"beat"的关键帧动画,使爱心缓缓地跳动。
最后,我们只需要使用以下HTML代码来调用上面的CSS:
这样,我们就可以在网页上看到一个红色的爱心在跳动了!