知用网
白蓝主题五 · 清爽阅读
首页  > 电脑维护

用PPT或HTML做个会心跳的表白动画,电脑小白也能搞定

朋友小张上周靠一个3秒跳动的心形GIF,在公司茶水间成功把人追到手。其实他没花一分钱买礼物,就用电脑自带的PowerPoint加点动画,导出成GIF发过去——对方回了句‘这比玫瑰还戳我’。

别急着下软件,先看这几个轻量方案

表白要的是氛围,不是性能压测。Windows 自带的 PowerPoint、Mac 的 Keynote,甚至浏览器里打开 CodePen,都能做出带缩放、渐变、粒子飞散效果的动画。不需要装AE,更不用学代码。

PowerPoint 心跳动画三步走

1. 插入一个红色心形(插入 → 形状 → 心形);
2. 动画选项卡里选‘缩放’,效果选项设为‘平滑开始+平滑结束’,持续时间0.8秒;
3. 复制该动画两次,间隔0.3秒叠加上去,就出来‘噗—噗—噗’的律动感。

导出时选‘GIF 图像’,分辨率调到800×600足够手机全屏播放。

想更酷?5分钟写个网页版特效

新建一个文本文件,后缀改成 .html,粘贴下面这段代码,双击就能在浏览器里看到呼吸式发光心形:

<!DOCTYPE html><html><head><style>body { background: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .heart { width: 120px; height: 120px; background: #ff4757; transform: rotate(-45deg); position: relative; animation: beat 1.2s infinite; } .heart::before, .heart::after { content: ''; position: absolute; width: 120px; height: 120px; background: #ff4757; border-radius: 50%; } .heart::before { top: -60px; left: 0; } .heart::after { top: 0; left: 60px; } @keyframes beat { 0% { transform: rotate(-45deg) scale(1); } 50% { transform: rotate(-45deg) scale(1.15); } 100% { transform: rotate(-45deg) scale(1); } }</style></head><body><div class="heart"></div></body></html>

改颜色?把 #ff4757 换成你们校徽蓝、她最爱的樱花粉就行;加文字?在 <body> 里加 <p style="font-size:18px;color:#333;text-align:center;margin-top:20px;">余生请多指教</p> 就行。

小心这些“翻车”细节

导出GIF别用‘高保真’模式——文件太大微信发不出;网页版别用 WebP 格式图片,老版本微信打不开;如果对方用的是苹果手机,测试前先在 Safari 里点开看看动画会不会卡顿。还有,千万别在表白前一小时才做,本地预览没问题,上传到网盘链接可能被压缩失真——提前半天存好,截图确认再发。

上次帮同事做的告白页,最后加了一行小字:‘这个页面不联网,所有动画都在你手机里跑’。她说,这句话比动画还让她心跳加速。