HTML&&CSS动画｜10秒复制Airbnb按钮特效（附代码片段）

演示效果

下面是通过HTML+css实现的卡片掉落的动画！

实现思路

css思路

• 动画类定义
  • .animate-hover:hover：触发动画（持续2秒，变换原点）
• 关键帧动画
  • fall：旋转 → 摇摆 → 掉落消失
• 交互逻辑
  • 悬停在元素上时触发动画，最终元素下落并消失。

关键点

• 动画触发：通过 :hover 伪类直接调用动画，无需 JavaScript。
• 效果细节：旋转角度和位移模拟“铰链脱落”效果，transform-origin 确保围绕左上角旋转。
• 兼容性：使用 -webkit- 前缀和媒体查询适配不同场景。

实现过程

HTML

<div class="title animate-hover">css animation</div>
<div class="desc">卡片掉落动画(hover)</div>

基础动画

设置动画基础属性：持续时间、填充模式、变换原点、动画名称

.animate-hover:hover {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fall;
    animation-name: fall;
    -webkit-transform-origin: top left;
    transform-origin: top left
}

关键帧动画

• @keyframes fall 定义动画效果：
  • 0%：起始状态，缓动函数为 ease-in-out。
  • 20%, 60%：旋转 80 度，模拟摇摆效果。
  • 40%, 80%：旋转 60 度，保持透明度为 1。
  • to：向下移动 700px 并消失（opacity: 0）

@keyframes fall {
  0% {
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out
  }

  20%,
  60% {
      -webkit-transform: rotate(80deg);
      transform: rotate(80deg);
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out
  }

  40%,
  80% {
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1
  }

  to {
      -webkit-transform: translate3d(0, 700px, 0);
      transform: translate3d(0, 700px, 0);
      opacity: 0
  }
}

完整代码

codepen.io/THApprentic…

结语

我组建了一个前端技术交流微信群，诚邀你加入。我会定期解答群成员的前端相关问题，并不定时分享行业干货；大家在学习新技术时也可以结为学习伙伴，互相督促共同进步。

关注公众号[前端小饭桌]回复“进群”获取二维码