CSS3（过渡、动画、动画和过渡的区别、多列布局）

编程语言 2025-04-12 00:18:10 阅读次数: 0

文章目录


视频教程： 181_CSS3_过渡

1. 过渡

CSS3中的过渡（Transition）是一种可以实现平滑属性值变化的特效，它允许你在指定的时间内平滑地改变元素的CSS属性值，而不需要使用JavaScript或其他动画技术

过渡效果由以下四个属性控制：

  • transition-property: 指定应用过渡效果的CSS属性名称
  • transition-duration: 过渡效果持续的时间
  • transition-timing-function: 过渡效果的时间曲线
  • transition-delay: 过渡效果开始前的延迟时间

1.1 属性详解

1.1.1 transition-property

指定哪个或哪些CSS属性将会有过渡效果。可以是以下值：

  • none: 没有属性会获得过渡效果
  • all: 所有可动画属性都将获得过渡效果
  • 属性名称: 指定一个或多个以逗号分隔的属性名称，如 width, height

1.1.2 transition-duration

定义过渡效果持续的时间，单位为秒（s）或毫秒（ms）

  • 0.5s: 过渡效果持续0.5秒
  • 200ms: 过渡效果持续200毫秒

1.1.3 transition-timing-function

定义过渡效果的速度曲线。常见的值有：

  • linear: 匀速
  • ease: 默认值，慢速开始，然后变快，最后慢速结束
  • ease-in: 慢速开始
  • ease-out: 慢速结束
  • ease-in-out: 慢速开始和结束
  • cubic-bezier(n, n, n, n): 自定义时间曲线，n为0到1之间的数值

cubic-bezier：贝塞尔曲线

贝塞尔曲线示例网站：https://cubic-bezier.com

在这里插入图片描述

1.1.4 transition-delay

定义过渡效果开始前的延迟时间，单位为秒（s）或毫秒（ms）

  • 1s: 过渡效果延迟1秒后开始
  • 500ms: 过渡效果延迟500毫秒后开始

1.2 简写属性

如果只设置了一个时间，该时间表示 transition-duration，其他值没有顺序要求

如果设置了两个时间，第一个时间表示 transition-duration，第二个时间表示 transition-duration，其他值没有顺序要求

可以将上述四个属性合并为一个简写属性 transition，格式如下：

transition: transition-property transition-duration transition-timing-function transition-delay;

例如：

transition: width 2s ease 0.5s;

1.3 哪些CSS属性可以发生过渡

1.3.1 可以发生过渡的CSS属性

  1. 颜色属性：
    • 标准：能够平滑地从一种颜色渐变到另一种颜色
    • 示例：color, background-color, border-color, opacity（虽然不是颜色，但可以渐变）
  2. 数值属性：
    • 标准：能够接受数值，并且这些数值可以逐渐变化
    • 示例：width, height, margin, padding, border-width, font-size, line-height
  3. 百分比属性：
    • 标准：基于百分比的属性，其值可以逐渐变化
    • 示例：width, height, top, right, bottom, left（当使用百分比时）
  4. 长度属性：
    • 标准：基于长度单位（如px, em, rem）的属性，其值可以逐渐变化
    • 示例：margin, padding, border-width, font-size
  5. 变换属性（Transform properties）：
    • 标准：用于2D或3D变换的属性，可以平滑地从一个状态变换到另一个状态
    • 示例：transform（包括translate, rotate, scale等）
  6. 阴影属性：
    • 标准：可以平滑地改变阴影效果
    • 示例：text-shadow, box-shadow
  7. 其他可动画属性：
    • 标准：规范中明确指出可以动画化的其他属性
    • 示例：background-position, opacity, visibility（从visible到hidden或相反）

1.3.2 区别的标准

  • 可动画性：属性是否能够在不同的值之间平滑过渡，而不是突然跳变
  • 连续性：属性的值是否可以连续变化，而不是离散的几个固定值
  • 规范定义：CSS动画规范（如CSS Transitions或CSS Animations）是否将属性定义为可动画的

1.3.3 不可发生过渡的CSS属性

  • 通常是一些会触发布局变化或元素重新渲染的属性，如display, position, overflow, clip, z-index
  • 另外，如果属性本身是用于控制动画或过渡的，如animation和transition，则不能被过渡

1.4 案例

1.4.1 案例一

一个复杂的电商产品卡片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡</title>
  <style>
      * {
      
      
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Segoe UI', system-ui, sans-serif;
      }

      body {
      
      
          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          min-height: 100vh;
          padding: 40px;
      }

      .product-grid {
      
      
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 30px;
          max-width: 1200px;
          margin: 0 auto;
      }

      .product-card {
      
      
          background: white;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          position: relative;
          transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          box-shadow 0.4s ease;
          min-height: 580px;
      }

      .product-card:hover {
      
      
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      }

      .product-image {
      
      
          height: 240px;
          overflow: hidden;
          position: relative;
      }

      .product-image img {
      
      
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.4s ease;
      }

      .product-card:hover .product-image img {
      
      
          transform: scale(1.05);
      }

      .product-tag {
      
      
          position: absolute;
          top: 15px;
          right: 15px;
          background: #ff4757;
          color: white;
          padding: 6px 15px;
          border-radius: 20px;
          font-size: 14px;
          transition: all 0.3s ease;
      }

      .product-card:hover .product-tag {
      
      
          background: #ff6b81;
          transform: scale(1.05);
      }

      .product-content {
      
      
          padding: 25px;
          position: relative;
      }

      .product-title {
      
      
          font-size: 1.4em;
          color: #2d3436;
          margin-bottom: 12px;
          transition: color 0.3s ease;
      }

      .product-description {
      
      
          color: #636e72;
          line-height: 1.6;
          margin-bottom: 20px;
          height: 80px;
          overflow: hidden;
      }

      .product-price {
      
      
          font-size: 1.8em;
          color: #2ecc71;
          font-weight: bold;
          margin-bottom: 20px;
          position: relative;
          transition: all 0.4s ease;
      }

      .product-card:hover .product-price {
      
      
          transform: translateX(10px);
          color: #27ae60;
      }

      .cta-button {
      
      
          display: inline-block;
          padding: 12px 30px;
          background: linear-gradient(135deg, #6c5ce7, #a8a4e6);
          color: white;
          border-radius: 25px;
          text-decoration: none;
          font-weight: 500;
          opacity: 0;
          transform: translateY(10px);
          transition: all 0.4s ease 0.1s;
          position: absolute;
          bottom: -30px;
          right: 25px;
      }

      .product-card:hover .cta-button {
      
      
          opacity: 1;
          transform: translateY(0);
      }

      .rating {
      
      
          display: flex;
          gap: 3px;
          margin-bottom: 15px;
      }

  </style>
</head>
<body>
<div class="product-grid">
  <div class="product-card">
    <div class="product-image">
      <span class="product-tag">限时优惠</span>
      <img src="https://img0.baidu.com/it/u=3855146400,3736016131&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
           alt="智能手表">
    </div>
    <div class="product-content">
      <h3 class="product-title">ProX 智能手表4代</h3>
      <div class="rating">
        ★★★★★
      </div>
      <p class="product-description">
        全新AMOLED显示屏，支持血氧检测和睡眠监测，50米防水设计，长达14天续航时间，支持NFC移动支付。
      </p>
      <div class="product-price">¥1,299</div>
      <a href="#" class="cta-button">立即购买</a>
    </div>
  </div>

  <div class="product-card">
    <div class="product-image">
      <span class="product-tag">新品上市</span>
      <img src="https://img2.baidu.com/it/u=4080671067,902558169&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
           alt="无线耳机">
    </div>
    <div class="product-content">
      <h3 class="product-title">SoundMax 降噪耳机Pro</h3>
      <div class="rating">
        ★★★★☆
      </div>
      <p class="product-description">
        主动降噪技术，通透模式自由切换，24小时总续航，IPX5防水等级，支持无线充电和快速配对。
      </p>
      <div class="product-price">¥899</div>
      <a href="#" class="cta-button">立即购买</a>
    </div>
  </div>

  <div class="product-card">
    <div class="product-image">
      <span class="product-tag">限量版</span>
      <img src="https://img0.baidu.com/it/u=2950622251,808370824&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=666" alt="相机">
    </div>
    <div class="product-content">
      <h3 class="product-title">Z-Cam 全画幅微单</h3>
      <div class="rating">
        ★★★★★
      </div>
      <p class="product-description">
        2400万像素全画幅传感器，4K 60帧视频拍摄，五轴防抖系统，双卡槽设计，专业级log模式。
      </p>
      <div class="product-price">¥12,999</div>
      <a href="#" class="cta-button">立即购买</a>
    </div>
  </div>
</div>
</body>
</html>

1.4.2 案例二

一个在线书店的首页，其中包含多个推荐书籍的展示区域。当用户将鼠标悬停在某个书籍封面时，书籍封面会轻微旋转并放大，同时显示书籍的简介和购买按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线书店</title>
  <style>
      body {
      
      
          font-family: 'Arial', sans-serif;
          margin: 0;
          padding: 20px;
          background-color: #f7f7f7;
      }

      .container {
      
      
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
      }

      .book-card {
      
      
          width: 200px;
          margin: 15px;
          position: relative;
          overflow: hidden;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease;
      }

      .book-card:hover {
      
      
          transform: scale(1.05);
      }

      .book-cover {
      
      
          width: 100%;
          height: auto;
          display: block;
      }

      .book-info {
      
      
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: rgba(255, 255, 255, 0.9);
          padding: 10px;
          transform: translateY(100%);
          transition: transform 0.3s ease;
      }

      .book-card:hover .book-info {
      
      
          transform: translateY(0);
      }

      .book-title {
      
      
          font-size: 18px;
          margin-bottom: 5px;
      }

      .book-description {
      
      
          font-size: 14px;
          height: 60px;
          overflow: hidden;
      }

      .buy-button {
      
      
          display: block; /* 将按钮设置为块级元素以便可以使用 margin: auto */
          padding: 5px 10px;
          background-color: #007bff;
          color: white;
          text-decoration: none;
          border-radius: 5px;
          margin-top: 10px;
          margin-left: auto; /* 水平居中 */
          margin-right: auto; /* 水平居中 */
          text-align: center;
      }

      .buy-button:hover {
      
      
          background-color: #0056b3;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="book-card">
    <img src="https://img2.baidu.com/it/u=1337862573,1045865326&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1063"
         alt="书籍封面" class="book-cover">
    <div class="book-info">
      <h3 class="book-title">书名：《三体》</h3>
      <p class="book-description">
        简介：《三体》是刘慈欣创作的科幻小说系列，讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。</p>
      <a href="#" class="buy-button">购买</a>
    </div>
  </div>
  <!-- 更多书籍卡片可以按照上面的格式继续添加 -->
</div>
</body>
</html>

2. 动画

2.1 帧

2.1.1 什么是帧

帧是动画的基本单元，它代表动画在某一特定时刻的静态图像。在传统的动画制作中，帧是由动画师手绘的一系列连续的画面，每一帧都是动画序列中的一个步骤。在数字动画中，帧通常是指数字图像或图形，它们按照一定的顺序快速连续显示，以产生运动的错觉

帧的主要特点：

  • 静态图像：每一帧都是一个完整的图像，显示动画在特定时间点的状态
  • 连续性：帧按顺序排列，连续播放时形成动画
  • 时间间隔：帧与帧之间的时间间隔决定了动画的流畅度，通常以帧率（如每秒24帧）来衡量

2.1.2 什么是关键帧

关键帧是在动画中定义的特定帧，它们标记了动画中重要的变化点。在这些帧上，动画的某些属性（如位置、大小、颜色等）会发生显著的变化。关键帧之间的动画过渡是由动画软件或渲染引擎自动生成的，从而形成平滑的动画效果

关键帧的主要特点：

  • 变化点：关键帧定义了动画中属性值发生变化的时刻
  • 过渡生成：关键帧之间的动画是由系统自动计算生成的，减少了手动创建每一帧的工作量
  • 控制性：通过调整关键帧的位置和属性，可以精确控制动画的整体效果和节奏

2.2 @keyframes

CSS3的动画功能允许开发者创建复杂且流畅的动画效果，而不需要依赖于JavaScript。CSS3动画是通过@keyframes规则和动画属性来实现的

@keyframes规则用于创建动画。它定义了动画在不同阶段的状态，这些状态被称为关键帧（keyframes）。每个关键帧都包含一个百分比值，对应动画过程中的一个特定时间点

@keyframes example {
    
    
  0% {
    
     /* 初始状态样式 */ }
  50% {
    
     /* 中间状态样式 */ }
  100% {
    
     /* 结束状态样式 */ }
}

在@keyframes中，你可以定义多个关键帧，并且可以使用关键字from和to来代替0%和100%

2.3 动画属性

2.3.1 animation-name

指定应用动画的@keyframes的名称

  • <identifier>：由@keyframes定义的动画名称
  • none：不应用任何动画

2.3.2 animation-duration

设置动画完成一个周期所花费的时间

  • <time>：时间值，表示动画持续的时间，单位为秒(s)或毫秒(ms)，默认值为0s，即没有动画

2.3.3 animation-timing-function

定义动画的速度曲线

  • linear：动画从头到尾的速度是恒定的
  • ease：默认值，动画以慢速开始，然后加快，最后慢速结束
  • ease-in：动画以慢速开始
  • ease-out：动画以慢速结束
  • ease-in-out：动画以慢速开始和结束
  • cubic-bezier(<number>, <number>, <number>, <number>)：允许自定义时间曲线，四个数值分别代表两个控制点的坐标

2.3.4 animation-delay

设置动画在开始前的延迟时间

  • <time>：时间值，表示动画开始前等待的时间，默认值为0s，即无延迟

2.3.5 animation-iteration-count

设置动画应该播放的次数

  • <number>：数字值，表示动画应该播放的次数
  • infinite：无限循环播放动画

2.3.6 animation-direction

指定动画是否应该轮流反向播放

  • normal：动画正常播放
  • reverse：动画反向播放
  • alternate：动画在奇数次正向播放，在偶数次反向播放
  • alternate-reverse：动画在奇数次反向播放，在偶数次正向播放

2.3.7 animation-fill-mode

设置动画在执行前后如何为目标元素应用样式

  • none：动画不会影响动画之外的状态
  • forwards：动画完成后保持最后一个关键帧的样式
  • backwards：在动画延迟期间，目标元素将立即应用第一个关键帧的样式
  • both：动画遵循forwards和backwards的规则

2.3.8 animation-play-state

暂停和播放动画

  • paused：动画暂停
  • running：播放动画

2.4 应用动画

要将动画应用到元素上，你需要将animation简写属性或单独的动画属性应用到选择器上

.element {
    
    
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* 简写形式 */
.element {
    
    
  animation: example 2s ease-in-out 1s infinite alternate forwards running;
}

2.5 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>动画</title>
  <style>
      body {
      
      
          font-family: 'Arial', sans-serif;
          background-color: #f4f4f4;
          margin: 0;
          padding: 20px;
      }

      .container {
      
      
          max-width: 800px;
          margin: auto;
          background: white;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      .header {
      
      
          text-align: center;
          padding: 20px 0;
      }

      .earth {
      
      
          width: 200px;
          height: 200px;
          background: url('https://img2.baidu.com/it/u=4138229010,2946765856&fm=253&fmt=auto&app=138&f=GIF?w=152&h=114') no-repeat center center;
          background-size: cover;
          margin: auto;
          border-radius: 50%;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
          animation: rotate 20s linear infinite;
      }

      @keyframes rotate {
      
      
          from {
      
      
              transform: rotate(0deg);
          }
          to {
      
      
              transform: rotate(360deg);
          }
      }

      .content {
      
      
          margin-top: 40px;
      }

      .content h2 {
      
      
          color: #333;
      }

      .content p {
      
      
          color: #666;
          line-height: 1.6;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>保护地球，从我做起</h1>
    <div class="earth"></div>
  </div>
  <div class="content">
    <h2>我们的使命</h2>
    <p>
      地球是我们共同的家园，保护环境就是保护我们自己。我们的使命是通过教育和实际行动，提高公众对环境保护的意识，共同守护这个蓝色星球。</p>

    <h2>环保行动</h2>
    <p>
      我们倡导低碳生活，减少一次性用品的使用，鼓励垃圾分类，支持可再生能源的开发和利用。每个人的一小步，都是地球的一大步。</p>

    <h2>加入我们</h2>
    <p>如果你也关心地球的未来，欢迎加入我们的行列。无论是参与线上活动，还是线下实践，你的每一份努力都将为地球带来改变。</p>
  </div>
</div>
</body>
</html>

3. 动画和过渡的区别

动画（Animations）和过渡（Transitions）在CSS中都是用来创建动态效果的技术，但它们之间有一些关键的区别：

  1. 触发方式：
    • 过渡（Transitions）：通常是由一个状态变化触发的，比如用户悬停（hover）、点击或者类名的添加和移除。过渡需要有一个状态变化作为触发点
    • 动画（Animations）：是通过@keyframes规则定义的一系列关键帧，可以在不需要任何触发事件的情况下自动运行。当然，也可以通过JavaScript或者CSS类来控制动画的开始和结束
  2. 控制程度：
    • 过渡（Transitions）：只能控制开始状态和结束状态之间的变化，以及变化的时间和曲线
    • 动画（Animations）：可以控制整个动画过程中的每一个步骤，包括开始、中间和结束状态。你可以定义多个关键帧，每个关键帧都可以有不同的样式
  3. 重复性：
    • 过渡（Transitions）：通常是不可重复的，它们在状态变化时触发，然后结束
    • 动画（Animations）：可以无限次重复，可以通过animation-iteration-count属性来控制重复次数
  4. 方向：
    • 过渡（Transitions）：通常是单向的，从初始状态到最终状态
    • 动画（Animations）：可以通过animation-direction属性设置为正向、反向、交替等
  5. 复杂度：
    • 过渡（Transitions）：通常用于简单的效果，比如颜色变化、尺寸变化等
    • 动画（Animations）：可以创建更复杂的效果，比如路径运动、多个属性的同时变化等
  6. 性能考虑：
    • 过渡（Transitions）：通常性能开销较小，因为它们只处理两个状态之间的变化
    • 动画（Animations）：可能需要更多的计算资源，尤其是当动画复杂或者关键帧很多时

4. 多列布局

视频教程：183_CSS3_多列布局

CSS3的多列布局（Multi-column Layout）允许我们将内容分布在多个列中，类似于报纸或杂志的布局。这种布局方式使得长篇文章的阅读更加方便，同时也为网页设计提供了更多的灵活性

4.1 基本属性

以下是一些用于创建多列布局的基本CSS属性：

  • column-count: 设置列的数量
  • column-width: 设置列的理想宽度。浏览器会根据可用空间和这个值来决定实际的列数
  • columns: 这是一个简写属性，可以同时设置column-width和column-count（不推荐使用）

4.2 属性详解

4.2.1 column-count

.column-layout {
    
    
  column-count: 3; /* 内容将被分为3列 */
}

4.2.2 column-width

.column-layout {
    
    
  column-width: 200px; /* 列的理想宽度是200px */
}

4.2.3 columns

.column-layout {
    
    
  columns: 200px 3; /* 列的理想宽度是200px，至少3列 */
}

4.3 列间隙和规则

  • column-gap: 设置列与列之间的间隙
  • column-rule: 在列之间设置一条规则（类似于边框），可以设置宽度、样式和颜色
.column-layout {
    
    
  column-gap: 20px; /* 列间隙为20px */
  column-rule: 1px solid #ccc; /* 列之间的规则为1px的灰色实线 */
}

4.4 跨列

column-span: 设置元素是否应该跨越所有列

.header {
    
    
  column-span: all; /* 头部元素跨越所有列 */
}

4.5 实现效果

多列文字

在这里插入图片描述

多列图片

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_62128476/article/details/145659522
今日推荐
Electron中的关于静态资源加载问题解决方案
《Cursor-AI编程》基础篇-界面指南
《Cursor-AI编程》基础篇-Tab代码智能补充
《Cursor-AI编程》基础篇-Composer功能详解
《Cursor-AI编程》基础篇-Chat功能详解
《Cursor-AI编程》进阶篇-自定义模型
《Cursor-AI编程》进阶篇-上下文详解
【大模型系列篇】最强检索增强技术GraphRAG基本原理详解
【大模型系列篇】基于Ollama和GraphRAG v2.0.0快速构建知识图谱
解释什么是迁移学习？在 CNN 中如何应用？（面试题200合集，高频、关键）
解释数据增强（Data Augmentation）的概念和方法（（面试题200合集，高频、关键））
揭秘大模型“魔法”：Function Calling 让 AI 不止会说，更能“做”！
周排行
ConfigurationClassParser类的parse方法源码解析
基础大讲堂-java 位运算符
ConsecutiveInteger判断给定的整数n能否表示成连续的m(m>1)个正整数之和
多项式问题之六——多项式快速幂
Spring Security技术栈开发企业级认证与授权（四）RESTful API服务异常处理
Linux基础命令---apachectl
MATLAB中的线性插值
Unity编辑器拓展之十七：NGUI ComponentSelector增加搜索框
SqlServer 备份还原教程
[Unity动画]01.
每日归档
更多
2025-04-12(10529)
2025-04-11(9561)
2025-04-10(1213)
2025-04-09(10354)
2025-04-08(12998)
2025-04-07(0)
2025-04-06(0)
2025-04-05(0)
2025-04-04(0)
2025-04-03(0)