css实现飘落效果 |div css文字环绕图片

/* 需要实现飘落效果的元素 */
.falling {
position: fixed;
top: -50px; /* 元素开始的位置 */
left: 50%; /* 水平居中 */
transform: translateX(-50%);
animation: fall 3s ease-in-out infinite; /* 动画：名字是fall，循环无限次，持续3秒，加速减速效果 */
}
/* 定义动画 */
@keyframes fall {
0% {
top: -50px;
opacity: 1;
}
100% {
top: 100vh; /* 元素结束的位置：屏幕下方 */
opacity: 0; /* 淡出 */
}
}

在上面的代码中，大家首先定义了一个需要实现飘落效果的元素，用class名字为falling来表示。其中，position: fixed可以让元素在屏幕上保持固定的位置，top和left属性则定义了元素起始的位置。同时，大家使用了transform: translateX(-50%);来将元素水平居中显示。

接下来，大家定义了一个名为fall的动画。动画开始时，元素的top值为-50px，opacity为1；动画结束时，元素的top值为100vh（即屏幕下方），opacity为0，这样就实现了元素的淡出效果。

最后，大家通过animation属性将元素的动画应用到它身上。大家选用了ease-in-out函数，使得元素在动画的开始和结束时变得缓慢。由于animation属性的infinite关键字，动画会无限循环下去。

通过上述方法，大家可以使用CSS轻松地为元素添加飘落效果，使得页面更加生动有趣。