HTML&&CSS动画|10秒复制Airbnb按钮特效(附代码片段)

演示效果

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

实现思路

css思路

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

关键点

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

实现过程

HTML

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

基础动画

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

markdown 复制代码
.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)
markdown 复制代码
@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...

结语

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

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

相关推荐
涔溪15 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
代码的余温18 小时前
CSS3文本阴影特效全攻略
前端·css·css3
每天开心18 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
3Katrina1 天前
我仿造了一个掘金App的首页...
前端·css
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
结城2 天前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..2 天前
网络安全第三次作业
前端·css·html
小白阿龙2 天前
如何实现缓存音频功能(App端详解)
前端·css·html5
smile boy2 天前
个人财务记录应用
前端·javascript·css·css3·html5
FogLetter3 天前
从零复刻网易云音乐年度总结H5:技术细节与用户体验的完美结合
前端·css