1. 模拟心跳动
在本文中，我们将使用HTML和CSS3来创建一个简单的心形图标，并通过动画效果实现心跳的效果。我们将使用CSS3中的@keyframes和animation属性来实现这个效果。
1.1 创建HTML结构
首先，我们需要创建一个HTML文件，并为心形图标定义一个适当的容器。以下是创建此容器的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heartbeat Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heart"></div>
</body>
</html>
在上面的代码中，我们在
标签中创建了一个<div>元素，类名为"heart"，用于容纳心形图标。
1.2 设置CSS样式
接下来，我们需要为心形图标设置CSS样式。在一个名为"style.css"的外部CSS文件中，添加以下代码：
.heart {
width: 100px;
height: 100px;
position: relative;
background-color: red;
transform: rotate(45deg);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
.heart:before {
top: -50px;
left: 0;
}
.heart:after {
top: 0;
left: 50px;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.heart:hover {
animation: heartbeat 1s infinite;
}
在上面的代码中，我们通过定义.heart类选择器中的width和height属性设置了心形图标的大小。我们还使用position:relative将其相对定位，以便在后续设置伪元素时使用。
接下来，我们使用:before和:after伪元素为心形添加了两个半圆。我们通过设置它们的top和left属性来将它们放置在适当的位置上。
然后，我们定义了一个名为"heartbeat"的@keyframes规则，其中包含三个不同的关键帧：0%、50%和100%。在0%关键帧中，我们将心形的大小设置为原始大小；在50%关键帧中，我们将其放大了30%；在100%关键帧中，我们将其恢复到原始大小。这样，我们就创建了心跳效果。
最后，我们通过将animation属性添加到.hover类选择器中，将动画效果应用到鼠标悬停在心形图标上的情况下。
1.3 运行结果
现在，我们已经完成了HTML和CSS的编码。在浏览器中打开HTML文件，你将看到一个带有动画效果的心形图标。鼠标悬停在图标上时，它将开始跳动。
以上是使用HTML和CSS3模拟心跳动的实例代码。通过使用CSS3中的动画属性和@keyframes规则，我们可以创建各种各样的动态效果。