<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动的红心</title>
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
margin: 50px;
}
.heart::before,
.heart::after {
position: absolute;
content: "";
top: 40px;
width: 52px;
height: 80px;
border-radius: 50px 50px 0 0;
background: red;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.heart-animation {
animation: beat 1s infinite;
}
@keyframes beat {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="heart heart-animation"></div>
<script>
// 这里可以添加JavaScript代码,如果需要的话
</script>
</body>
</html>
用HTML5、CSS3和JavaScript来创建一个会跳动的红心
最新推荐文章于 2024-05-23 17:56:03 发布