css气球动画 |css动画白屏

.balloon {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 50px;
background-color: #FF6767;
border-radius: 20px 20px 50px 50px;
border: 2px solid #333333;
box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
animation-name: balloonUp;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.balloon:before {
content: "";
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #FF6767;
}
@keyframes balloonUp {
0% {
transform: translateX(-50%) translateY(0%);
}
50% {
transform: translateX(-50%) translateY(-100%);
}
100% {
transform: translateX(-50%) translateY(0%);
}
}

上面是大家的css代码，大家使用了伪元素:before来制作气球的绳子，使用animation来制作气球上升的动画效果。其中，大家使用transform来实现气球的位置变换，使用animation-timing-function来控制气球动画加速度，使得气球的上升效果更加逼真。

通过这种简单的css代码，大家可以轻松地实现一个漂亮的气球动画效果，为大家的网页增加更多活力。