制作气球动态加载效果的关键在于使用 CSS 动画和伪元素。
首先，我们使用伪元素 ::before 和 ::after 来创建气球的形状。具体来说，我们可以使用 border-radius 属性和 transform 属性来调整形状和位置。
然后，我们使用 CSS 动画来实现气球的动态加载效果。我们可以使用 @keyframes 规则来定义动画的关键帧，并使用 animation 属性将其应用到气球元素上。在动画中，我们可以使用 scale() 函数来调整气球的大小，使用 translateY() 函数来调整气球的位置。
以下是一个示例代码：
.balloon {
position: relative;
width: 40px;
height: 60px;
background-color: #f00;
border-radius: 50% 50% 0 0;
margin: 20px auto;
animation: balloon 1s ease-in-out infinite;
}
.balloon::before, .balloon::after {
content: "";
position: absolute;
bottom: 0;
}
.balloon::before {
width: 20px;
height: 20px;
background-color: #f00;
border-radius: 50%;
left: 10px;
}
.balloon::after {
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #f00 transparent;
left: 0;
}
@keyframes balloon {
0% {
transform: scale(1) translateY(0);
}
50% {
transform: scale(1.2) translateY(-20px);
}
100% {
transform: scale(1) translateY(0);
}
}在这个示例中，我们创建了一个红色气球元素，并使用 ::before 和 ::after 伪元素来创建气球的细节部分。然后，我们定义了一个名为 balloon 的动画，将其应用到气球元素上，并使用 infinite 参数使其无限循环播放。
通过调整 @keyframes 规则中的关键帧，我们可以调整气球的动态加载效果。例如，我们可以调整 scale() 函数的参数来改变气球的大小，调整 translateY() 函数的参数来改变气球的位置。
最后，我们可以在 HTML 中添加一个具有 .balloon 类的元素，以显示气球动态加载效果。