做PPT或者网页演示时,总想加点小惊喜。比如在页面打开的瞬间,从屏幕上方缓缓飘下各种小礼物盒、星星、彩带,氛围一下子就热闹起来了。这种“礼物飘落特效动画”其实并不难做,掌握几个关键技巧,自己也能快速实现。
思路很简单:让元素从上往下动
这类动画的核心是“多个小元素”沿着Y轴下落,同时带上一点随机性——比如飘落速度不一样,旋转角度不同,大小也有差异,看起来才自然。可以用CSS动画配合HTML结构来完成。
假设我们用几个代表礼物的小div,每个都加上不同的动画延迟和持续时间,就能模拟出错落有致的效果。
<div class="gift-container">
<div class="gift" style="--delay: 0s; --duration: 5s; --size: 1">🎁</div>
<div class="gift" style="--delay: 1.2s; --duration: 7s; --size: 1.2">🎉</div>
<div class="gift" style="--delay: 0.5s; --duration: 6s; --size: 0.8">🎀</div>
<!-- 可以继续添加更多 -->
</div>
CSS控制动画行为
通过CSS变量定义每个礼物的尺寸、延迟和动画周期,再用@keyframes让它从顶部掉下来,过程中加点旋转会更生动。
.gift-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
.gift {
position: absolute;
font-size: calc(20px * var(--size));
animation: fall linear infinite;
animation-duration: var(--duration);
animation-delay: var(--delay);
}
@keyframes fall {
0% {
transform: translateY(-50px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
上面这段代码里,每个礼物图标都会从屏幕外上方开始掉落,边掉边转圈,到底部时完全透明。由于设置了不同的 delay 和 duration,它们不会齐刷刷一起动,而是像真的被撒下来一样。
实际应用场景
比如你在一个产品发布会的网页演示中,讲到“年终福利”环节时,触发这个特效,观众立刻就能感受到情绪上的变化。不需要复杂的3D引擎,几行代码就搞定气氛组。
如果是在PowerPoint里做类似效果,可以考虑导出为HTML网页嵌入,或者使用支持自定义动画的插件。但直接写前端代码自由度更高,还能适配手机端浏览。
想让礼物更多样?把 🎁 换成 SVG 小图标,比如礼盒、气球、雪花形状,再给每个加点不同的晃动动画,视觉层次立马提升。