HTML愛心動畫效果代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML愛心動畫效果代碼</title>
<style>
body {
background-color: #f5f5f5;
}
#heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 90px;
background-color: #fff;
border-radius: 50% 50% 0 0;
animation: beat 0.5s infinite linear;
}
#heart:before,
#heart:after {
content: "";
position: absolute;
top: 0;
background-color: #fff;
}
#heart:before {
left: -50px;
border-radius: 50% 0 0 50%;
width: 50px;
height: 50px;
}
#heart:after {
left: 0;
border-radius: 0 50% 50% 0;
width: 50px;
height: 50px;
}
@keyframes beat {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div id="heart"></div>
</body>
</html>以上就是HTML愛心動畫效果的代碼，實現了一個有節奏的跳動，如同一個真實的心臟般跳動。