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...

结语

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

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

相关推荐
forever_Mamba7 小时前
CSS隐藏页面元素
前端·css
β添砖java7 小时前
CSS定位布局
前端·css·html
lyj1689978 小时前
CSS中 min() max() clamp()函数
前端·javascript·css
用户4582031531712 小时前
CSS性能优化全攻略:提升页面加载与渲染速度
前端·css
立方世界13 小时前
CSS水平垂直居中方法深度分析
前端·css
05Nuyoah14 小时前
DAY 04 CSS文本,字体属性以及选择器
前端·css
粉末的沉淀16 小时前
css:固定跨度间隔的渐变色设置
前端·css
EveryPossible1 天前
展示内容框
前端·javascript·css
前端Hardy1 天前
HTML&CSS:高颜值交互式日历,贴心记录每一天
前端·javascript·css
千码君20161 天前
React Native:使用vite创建react项目并熟悉react语法
javascript·css·react native·react.js·html·vite·jsx