先看效果图
话不多说,直接上代码,粘贴就能用
heart.html
<html> <head> <title>Lovely Heart</title> <style type="text/css"> body { background-color: #FF0; font-family: Arial, sans-serif; font-size: 14px; color: #333; margin: 0; padding: 0; } #heart { width: 100px; height: 101px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; background: #F00; border-radius: 10%; box-shadow: 0 0 10px #F00; animation: heart-beat 1s infinite; } #heart1 { width: 100px; height: 100px; position: absolute; top: 50%; left: 47%; margin-top: -50px; margin-left: -50px; background: #F00; border-radius: 50%; box-shadow: 0 0 10px #F00; animation: heart-beat 1s infinite; } #heart2 { width: 100px; height: 100px; position: absolute; top: 45%; left: 50%; margin-top: -50px; margin-left: -50px; background: #F00; border-radius: 50%; box-shadow: 0 0 10px #F00; animation: heart-beat 1s infinite; } @keyframes heart-beat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div id="heart"></div> <div id="heart1"></div> <div id="heart2"></div> </body> </html>
由于是相对位置,如果有错位,可以稍微修改一下