心跳动画 · 入场与交互动画
前端Wiki/CSS 特效合集/心跳动画

心跳动画

等比放大两次再归位,永不停歇的心跳节奏

← 返回 入场与交互动画 类特效列表
心跳

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .hbt{width:120px;height:80px;margin:52px auto;border-radius:12px;background:linear-gradient(135deg,#e5534b,#f778ba);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;animation:kfx-hbt 1.6s ease-in-out infinite}
@keyframes kfx-hbt{0%,100%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.25)}}

HTML 结构

HTML
<div class="fx">
<div class="hbt">心跳</div>
</div>
实现要点:animate.style heartBeat:两次放大 + 长间隔停顿

其它入场与交互动画类特效

回到 前端Wiki 首页 · CSS 特效合集