<divclass="heart"> <divclass="heart-inner"></div> </div> .heart { position: relative; width: 50px; height: 50px; } .heart:before, .heart:after { content: ""; position: absolute; top: 0; left: 25px; width: 25px; height: 40px; background-color: red; border-radius: 25px25px00; transform: rotate(-45deg); transform-origin: 0100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100%100%; } .heart-inner { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background-color: red; border-radius: 15px; animation: heartbeat1sease-in-outinfinite; } @keyframesheartbeat { 0% { transform: scale(1); } 25% { transform: scale(0.75); } 50% { transform: scale(1); } }
通过上面的代码,我们可以实现一个红色的爱心动画效果。当然还有很多其他的实现方法,需要根据具体情况进行选择。