css animation与skew倾斜动画实现-css教程-PHP中文网

css animation与skew倾斜动画实现

P粉602998670

发布： 2025-10-14 09:02:01

原创

650人浏览过

animation 与 transform: skew() 可结合实现倾斜动画，通过 @keyframes 控制 skew 角度变化，用于按钮悬停、卡片入场等交互反馈，需控制角度与时间以保持视觉流畅自然。

css animation与skew倾斜动画实现

CSS 动画中的 animation 与 transform: skew() 可以结合使用，实现有趣的倾斜动画效果。skew 是一种 2D 变形（transform），用于让元素沿 X 轴、Y 轴或两者同时倾斜指定角度。通过 animation 控制 skew 的变化过程，可以制作出动态的视觉反馈，比如按钮悬停倾斜、卡片翻转前奏等。

1. skew 倾斜的基本语法

skew() 函数接受一个或两个参数，分别表示 X 和 Y 方向的倾斜角度（单位为 deg）：

skew(30deg) —— 仅在 X 轴方向倾斜 30 度
skew(30deg, 10deg) —— X 轴倾斜 30 度，Y 轴倾斜 10 度

例如：

.element {
  transform: skew(20deg, -10deg);
}

登录后复制

2. 使用 animation 实现动态倾斜

将 skew 作为 transform 属性的一部分，配合 @keyframes 定义动画关键帧，可实现平滑的倾斜动画。

立即学习“前端免费学习笔记（深入）”；

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

示例：鼠标悬停时元素从无倾斜变为倾斜 15 度，再恢复

.animated-box {
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 50px auto;
  transition: transform 0.3s ease;
}

.animated-box:hover {
  transform: skew(15deg, -5deg);
}

登录后复制

或者使用 animation 实现自动播放的倾斜抖动效果：

@keyframes wobble {
  0% { transform: skew(0); }
  25% { transform: skew(10deg, -5deg); }
  50% { transform: skew(-10deg, 5deg); }
  75% { transform: skew(5deg, -2deg); }
  100% { transform: skew(0); }
}

.wobble-animation {
  animation: wobble 2s ease-in-out infinite;
}

登录后复制