使用css写一个水滴下落的动画
创建一个水滴下落的动画可以通过多种方法实现,下面是一个简单的例子,使用CSS的关键帧动画(@keyframes
)来模拟水滴下落的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水滴下落动画</title>
<style>
.water-drop {
position: relative;
width: 50px;
height: 70px;
background: #0F4C81;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
animation: dropFall 2s infinite; /* 动画名称,持续时间,循环次数 */
}
@keyframes dropFall {
0% {
top: 0;
opacity: 1;
}
80% {
opacity: 1;
}
100% {
top: 300px; /* 下落距离 */
opacity: 0; /* 透明度变为0,模拟水滴消失 */
transform: scale(0.5); /* 水滴在底部时缩小 */
}
}
</style>
</head>
<body>
<div class="water-drop"></div>
</body>
</html>
这个例子中,.water-drop
类定义了一个水滴的形状和动画。@keyframes dropFall
定义了动画的关键帧,从水滴的起始位置(top: 0
)下落到底部(top: 300px
),并且在底部时缩小并变为透明。
你可以根据需要调整水滴的形状、颜色、下落距离、动画持续时间等属性。此外,为了更逼真的效果,你还可以添加更多的细节,比如水滴下落时的晃动效果。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)