三十的博客

CSS 过渡和变换分步学习指南

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
发布时间
阅读量 加载中...

基础概念

1. 什么是 CSS 变换

变换可以改变元素的形状、位置和大小，但不影响文档流。

示例：

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin: 50px;
        /* 水平移动50px */
        transform: translateX(50px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <p>这个蓝色方块被向右移动了50px</p>
  </body>
</html>

2. 什么是 CSS 过渡

过渡可以让 CSS 属性的变化变得平滑。

示例：

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px;
        /* 设置过渡：所有属性变化用时0.5秒 */
        transition: all 0.5s;
      }
      .box:hover {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <p>鼠标悬停在红色方块上，它会平滑地变宽</p>
  </body>
</html>

属性详解

过渡属性详解

transition 是 CSS3 中用来实现元素状态间平滑过渡的属性，它由以下几个子属性组成：

完整语法

css 
transition: [property] [duration] [timing-function] [delay];

子属性说明

属性 说明 示例值
transition-property 指定过渡的 CSS 属性 all, width, opacity
transition-duration 过渡持续时间 0.3s, 1s, 500ms
transition-timing-function 过渡速度曲线 ease, linear, ease-in-out
transition-delay 过渡开始前的延迟时间 0s, 0.5s

简写示例

css 
/* 所有属性变化，0.3秒完成，使用默认缓动，无延迟 */
transition: all 0.3s;

/* 仅宽度和透明度变化，1秒完成，慢快慢缓动，延迟0.2秒 */
transition: width 1s ease, opacity 1s ease 0.2s;

变换属性详解

transform 允许你对元素进行旋转、缩放、移动或倾斜等变换。

常用变换函数

函数 说明 示例
translate() 移动元素 translateX(10px), translate(10px, 20px)
rotate() 旋转元素 rotate(45deg)
scale() 缩放元素 scale(1.5), scaleX(2)
skew() 倾斜元素 skewX(15deg), skewY(10deg)
matrix() 矩阵变换 matrix(1, 0, 0, 1, 0, 0)

组合变换

可以同时应用多个变换函数：

css 
transform: translateX(10px) rotate(45deg) scale(1.2);

变换原点

使用 transform-origin 可以改变变换的基准点：

css 
transform-origin: 50% 50%; /* 默认值，中心点 */
transform-origin: left top; /* 左上角 */
transform-origin: 20px 50px; /* 具体坐标 */

组合使用

变换 + 过渡

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 50px;
        transition: all 0.3s;
      }
      .box:hover {
        transform: translateX(20px);
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <p>鼠标悬停时，方块会向右移动并变色</p>
  </body>
</html>

过渡的各个属性

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: purple;
        margin: 50px;
        /* 分解的transition属性 */
        transition-property: transform, background-color;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
        transition-delay: 0.2s;
      }
      .box:hover {
        transform: translateX(50px) rotate(45deg);
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <p>鼠标悬停时，方块会向右移动、旋转45度并变色，有延迟和缓动效果</p>
  </body>
</html>

多种变换组合

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: teal;
        margin: 100px;
        transition: all 0.5s;
      }
      .box:hover {
        /* 组合变换：移动、旋转、缩放 */
        transform: translateX(50px) rotate(30deg) scale(1.5);
        background-color: gold;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <p>鼠标悬停时，方块会移动、旋转、放大并变色</p>
  </body>
</html>

实际应用

按钮悬停效果

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: all 0.3s;
      }
      .button:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <a href="#" class="button">悬停按钮</a>
    <p>鼠标悬停时，按钮会上浮并显示阴影</p>
  </body>
</html>

知识扩展

transition-timing-function 详解

这个属性定义了过渡效果的速度曲线：

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .box {
        width: 50px;
        height: 50px;
        background-color: red;
        position: relative;
        left: 0;
        transition: left 2s;
      }
      .container:hover .box {
        left: calc(100% - 50px);
      }
      .ease {
        transition-timing-function: ease;
      }
      .linear {
        transition-timing-function: linear;
      }
      .ease-in {
        transition-timing-function: ease-in;
      }
      .ease-out {
        transition-timing-function: ease-out;
      }
      .ease-in-out {
        transition-timing-function: ease-in-out;
      }
      .custom {
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box ease">ease</div>
      <div class="box linear">linear</div>
      <div class="box ease-in">ease-in</div>
      <div class="box ease-out">ease-out</div>
      <div class="box ease-in-out">ease-in-out</div>
      <div class="box custom">custom</div>
    </div>
    <p>鼠标悬停在容器上，观察不同速度曲线的区别</p>
  </body>
</html>

注意事项

  1. 性能考虑： transform 和 opacity 的变化不会触发重排(relayout)，性能较好
  2. 硬件加速： 3D 变换会启用 GPU 加速 transform: translateZ(0);
  3. 过渡限制： 不是所有 CSS 属性都可以过渡，如 display 属性
  4. 变换顺序： 变换函数的顺序会影响最终效果：
css 
/* 先旋转再移动 */
transform: rotate(45deg) translateX(50px);

/* 先移动再旋转 - 效果不同 */
transform: translateX(50px) rotate(45deg);
#CSS基础 #网页布局