Web 开发 21

1 CSS子选择器

图中展示的是 CSS 子选择器（>）的用法，这是 CSS 中用于选择元素直接子元素的一种选择器，属于 CSS 选择器中较为基础但很实用的一类，并非 "高级" 用法（不过在 CSS 选择器体系里，它是精准选择元素层级关系的重要工具）。

子选择器的定义与作用

子选择器（>）用于匹配指定元素的直接子元素 。也就是说，只有当某个元素是另一个元素的直接后代（一级子元素） 时，才会被该选择器选中，更深层级的嵌套元素不会被选中。

结合示例分析

看左侧 HTML 结构，有一个类为 container 的 div 元素，它包含多个子元素，比如 <section class="child" id="c1"> 以及几个类为 child 的 div（id 分别为 c2、c3、c4）。

如果我们写这样的 CSS 规则：

.container > .child {
    /* 这里写样式规则，比如 font-size: 20px; */
}

• 对于 <section class="child" id="c1">，它是 container 的直接子元素，会被选中。
• 对于 id 为 c2、c3、c4 的类为 child 的 div，它们也是 container 的直接子元素，会被选中。
• 而 <section class="child" id="c1"> 里面的 <div>subchild</div>，因为是 section 的子元素，不是 container 的直接子元素，所以不会被 container > .child 这个选择器选中。

再看右侧对 "Child selector (>)" 的说明，示例中用子选择器选择后，只有标注为 child 的元素被选中，更深层的 subchild 不会被选，这也印证了子选择器只作用于直接子元素的特点。

子选择器的优势

相比后代选择器（用空格分隔，选择所有后代元素），**子选择器能更精准地控制样式作用的范围，避免样式 "蔓延" 到不必要的深层级元素，**让 CSS 样式的作用更加明确，也有助于提高 CSS 代码的可维护性。

2 CSS选择器

CSS（层叠样式表）选择器是用于选中需要设置样式的 HTML 元素的模式。通过选择器，我们可以精确地指定哪些元素应用特定的样式。以下是常见的 CSS 选择器类型：

基本选择器

• 元素选择器 ：根据 HTML 元素名称来选择元素。例如，p 选择器会选中页面中所有的 <p> 标签元素。

p {
    color: blue;
}

• 类选择器 ：通过 HTML 元素的 class 属性值来选择元素。类选择器以点（.）开头，一个元素可以有多个类，一个类可以应用到多个元素上。例如，class="highlight" 的元素可以通过 .highlight 选择器选中。

.highlight {
    background-color: yellow;
}

• ID 选择器 ：依据 HTML 元素的 id 属性值来选择元素。由于 id 在一个页面中应该是唯一的，所以 ID 选择器通常用于选择单个特定的元素。ID 选择器以井号（#）开头。

#main-header {
    font-size: 24px;
}

组合选择器

• 后代选择器 ：使用空格分隔两个选择器，用于选择作为另一个元素后代的元素。例如，div p 会选中所有 <div> 元素内部的 <p> 元素，无论嵌套多少层。

div p {
    text-decoration: underline;
}

• 子选择器 ：使用大于号（>）分隔两个选择器，仅选择指定元素的直接子元素。如前文所述，parent > child 只会选中 parent 元素的直接子元素 child，更深层级的后代不会被选中。

nav > ul {
    list-style-type: none;
}

• 相邻兄弟选择器 ：使用加号（+）分隔两个选择器，选择紧跟在另一个元素后的相邻兄弟元素，且它们具有相同的父元素。例如，h2 + p 会选中紧跟在 <h2> 元素后的 <p> 元素。

h2 + p {
    color: red;
}

• 通用兄弟选择器 ：使用波浪线（~）分隔两个选择器，选择具有相同父元素的，在指定元素之后的所有兄弟元素。例如，h2 ~ p 会选中在 <h2> 元素之后的所有 <p> 元素，不论它们之间隔了多少其他元素。

h2 ~ p {
    font-style: italic;
}

伪类选择器

• 链接伪类 ：用于选择不同状态的链接，如 :link（未访问的链接）、:visited（已访问的链接）、:hover（鼠标悬停在链接上）、:active（激活的链接，鼠标按下未松开时）。

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    text-decoration: none;
}
a:active {
    color: red;
}

• 动态伪类 ：:focus 用于选择获得焦点的元素，如输入框获得光标焦点时。

input:focus {
    border: 2px solid green;
}

• 结构伪类 ：根据元素在文档结构中的位置来选择元素。例如，:first-child 选择父元素的第一个子元素，:last-child 选择父元素的最后一个子元素，:nth-child(n) 可以选择父元素的第 n 个子元素（n 可以是具体数字、公式如 2n 表示偶数位置等）。

li:first-child {
    font-weight: bold;
}
li:nth-child(2n) {
    background-color: lightgray;
}

• 目标伪类 ：:target 用于选择当前活动的目标元素，比如点击锚点链接后跳转到的带有相应 id 的元素。

#section:target {
    border: 2px dashed orange;
}

伪元素选择器

• :before 和 :after ：用于在选定元素的内容之前或之后插入内容，常和 content 属性一起使用。

p:before {
    content: ">> ";
    color: gray;
}
p:after {
    content: " <<";
    color: gray;
}

• :first-letter：选择文本的第一个字母，常用于实现首字下沉等效果。

p:first-letter {
    font-size: 2em;
    float: left;
    margin-right: 5px;
}

• :first-line：选择文本的第一行，可用于设置首行文本的样式。

p:first-line {
    color: red;
}

属性选择器

• 简单属性选择器 ：根据元素的属性来选择元素。例如，[target] 会选中所有带有 target 属性的元素。

[target] {
    border: 1px solid black;
}

• 属性值精确匹配选择器 ：[attribute="value"] 形式，选择属性值完全匹配指定值的元素。例如，[type="submit"] 会选中 type 属性值为 submit 的元素。

[type="submit"] {
    background-color: green;
    color: white;
}

• 属性值包含匹配选择器 ：[attribute*="value"] 形式，选择属性值中包含指定值的元素。例如，[class*="btn"] 会选中 class 属性值中包含 btn 的元素。

[class*="btn"] {
    padding: 10px 20px;
}

• 属性值开头匹配选择器 ：[attribute^="value"] 形式，选择属性值以指定值开头的元素。

[href^="https"] {
    color: blue;
}

• 属性值结尾匹配选择器 ：[attribute$="value"] 形式，选择属性值以指定值结尾的元素。

[href$=".pdf"] {
    background-image: url(pdf-icon.png);
    padding-left: 20px;
}

CSS 选择器提供了强大而灵活的方式来定位 HTML 元素，以便准确地应用样式，实现丰富多样的网页效果。

3 分析一个典型的嵌套结构HTML 代码

这段 HTML 代码展示了一个典型的嵌套结构，其中包含了父元素、子元素和后代元素的关系。我们以 <section class="child" id="c1"> 为核心来分析其父子关系：

整体结构分析

<div class="container">  <!-- 根容器，所有元素的祖先 -->
  <section class="child" id="c1">  <!-- 核心分析元素 -->
    <div>subchild</div>  <!-- section的子元素 -->
  </section>
  <div class="child" id="c2">child 2</div>  <!-- 与section同级的兄弟元素 -->
  <div class="child" id="c3">child 3</div>  <!-- 与section同级的兄弟元素 -->
  <div class="child" id="c4">child 4</div>  <!-- 与section同级的兄弟元素 -->
</div>

1. <section id="c1"> 与父元素的关系

• 父元素 ：<div class="container">
  • <section id="c1"> 是 .container 的直接子元素（一级子元素）
  • 两者是父子关系 ，用 CSS 子选择器表示为：.container > #c1
  • 特点：中间没有其他层级的元素，直接嵌套在 .container 内部

2. <section id="c1"> 与子元素的关系

• 子元素 ：<div>subchild</div>
  • 这个 <div> 是 <section id="c1"> 的直接子元素
  • 两者是父子关系 ，用 CSS 子选择器表示为：#c1 > div
  • 特点：这个 <div> 只属于 <section id="c1"> 的子元素，与外部的 .container 是隔代关系（非直接子元素）

3. <section id="c1"> 与兄弟元素的关系

• 同级兄弟元素 ：id="c2"、id="c3"、id="c4" 的三个 <div>
  • 它们与 <section id="c1"> 共享同一个父元素 .container
  • 彼此之间是兄弟关系（同一层级）
  • 用 CSS 相邻兄弟选择器表示：#c1 + #c2（选中紧跟在 c1 后的 c2）
  • 用 CSS 通用兄弟选择器表示：#c1 ~ div（选中 c1 后面所有同级的 div）

4. 多层级关系总结（以 .container 为起点）

.container（祖父）
├─ section#c1（子）
│  └─ div（孙：section的子，container的孙）
├─ div#c2（子）
├─ div#c3（子）
└─ div#c4（子）

5. 选择器应用差异

• 后代选择器 （空格）：.container div

  • 会选中：
    • section#c1 内部的 subchild div（孙元素）
    • 不会选中 section#c1 本身（因为它是 section 不是 div）
    • 不会选中 #c2/#c3/#c4（因为它们是直接子元素，但这里仅说明层级差异）

• 子选择器 （>）：.container > div

  • 会选中：#c2、#c3、#c4（直接子元素）
  • 不会选中 section#c1 内部的 subchild div（因为是孙元素）

• 精准选择 section 内部的 div ：#c1 > div

  • 仅选中 section#c1 直接包含的那个 div，与其他元素无关

这种层级关系在 CSS 样式设计中非常重要，不同的选择器会精准定位到不同层级的元素，避免样式污染。

例如，如果想给 section 内部的子元素单独设置样式，就需要用 #c1 > div 而不是 .container div，后者会影响所有层级的 div。

4 display: grid

display: grid 是 CSS 中用于创建二维网格布局的属性，它让网页开发者能够更轻松、灵活地控制网页元素的位置和排列方式，极大地简化了复杂布局的实现过程。以下是关于 CSS Grid 的详细介绍：

基本概念

• 网格容器（Grid Container） ：应用了 display: grid 或 display: inline-grid 属性的元素就是网格容器。网格容器为其子元素（网格项）创建了一个网格上下文。例如图中，若对 .container 类添加 display: grid 样式，.container 就成为了网格容器。
• 网格项（Grid Items）：网格容器的直接子元素就是网格项。它们会按照网格布局的规则排列在网格容器中。

主要属性

网格容器属性

• grid-template-columns 和 grid-template-rows ：定义网格的列和行的尺寸。可以使用长度值（如 px、em）、百分比、fr 单位（弹性分数单位，用于按比例分配空间）。

.container {
    display: grid;
    grid-template-columns: 100px 2fr 1fr; /* 创建三列，第一列宽100px，第二列和第三列按2:1的比例分配剩余空间 */
    grid-template-rows: 50px auto; /* 第一行高50px，第二行高度根据内容自动调整 */
}

• grid-template-areas：通过定义命名区域来指定网格项的位置，便于可视化布局结构。

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

然后通过 grid-area 属性将网格项分配到对应的命名区域：

.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
}

• grid-gap（或 grid-row-gap 和 grid-column-gap）：设置网格行与行之间、列与列之间的间距。

.container {
    display: grid;
    grid-gap: 10px; /* 行和列的间距都为10px */
    /* 或者分别设置 */
    grid-row-gap: 10px; 
    grid-column-gap: 15px; 
}

• justify-items 和 align-items ：控制网格项在各自网格单元格中的水平和垂直对齐方式。取值有 start（起点对齐）、end（终点对齐）、center（居中对齐）、stretch（拉伸以填满单元格，默认值）。

.container {
    display: grid;
    justify-items: center; /* 网格项在水平方向居中对齐 */
    align-items: center; /* 网格项在垂直方向居中对齐 */
}

• justify-content 和 align-content ：控制整个网格在网格容器内的水平和垂直对齐方式。取值有 start、end、center、stretch、space-around、space-between、space-evenly 等。

.container {
    display: grid;
    justify-content: space-around; /* 网格在水平方向上，各个网格之间以及与容器边缘的间隔均匀分布 */
    align-content: space-between; /* 网格在垂直方向上，两端对齐，网格之间间隔均匀 */
}

网格项属性

• grid-column 和 grid-row：指定网格项跨越的列数和行数，也可以指定其在网格中的起始和结束位置。

.item {
    grid-column: 1 / 3; /* 从第1列开始，跨越到第3列（即占据两列） */
    grid-row: 2; /* 位于第2行 */
}

• grid-area ：除了用于分配到命名区域，也可以直接指定网格项在网格中的位置，格式为 grid-area: <row-start> / <column-start> / <row-end> / <column-end>。

.item {
    grid-area: 1 / 2 / 3 / 4; /* 从第1行第2列开始，到第3行第4列结束 */
}

• justify-self 和 align-self ：单独控制某个网格项在其所在网格单元格中的水平和垂直对齐方式，与容器的 justify-items 和 align-items 属性类似，但优先级更高。

.item {
    justify-self: end; /* 该网格项在水平方向上右对齐 */
    align-self: start; /* 该网格项在垂直方向上顶对齐 */
}

优势与应用场景

• 优势 ：
  • 灵活性高：可以轻松创建复杂的二维布局，无论是响应式布局还是固定布局，都能很好地满足需求。
  • 可维护性强：通过清晰的网格定义和属性设置，代码结构更加清晰，方便后续的修改和维护。
  • 兼容性较好 ：现代浏览器基本都支持 CSS Grid，通过一些前缀（如 -webkit-、-moz- 等）可以兼容部分老版本浏览器。
• 应用场景 ：
  • 网页布局：常用于创建网站的整体布局，如导航栏、内容区域、侧边栏、页脚等部分的排列。
  • 图片画廊：方便地排列多张图片，通过设置网格列和行的尺寸，实现不同风格的图片展示效果。
  • 响应式设计：结合媒体查询，根据不同设备屏幕尺寸调整网格布局，实现良好的响应式效果。

CSS Grid 是一种强大的布局工具，能帮助开发者高效地实现各种复杂的二维布局需求，提升网页的视觉效果和用户体验。

5 overflow: visible

图中主要展示了 CSS 样式代码以及对 overflow: visible 属性的介绍，下面为你详细说明：

CSS 样式代码部分

.container {
    width: 50px;
    height: 50px;
    background-color: gray;
}

• .container ：这是一个类选择器，用于选中 HTML 中 class 属性值为 container 的元素。通过这个选择器，可以为具有该类名的元素统一设置样式。
• width: 50px; ：该属性定义了选中元素的宽度为 50 像素（px 是 CSS 中常用的长度单位 ）。在布局中，宽度属性用于控制元素在水平方向上占据的空间大小。
• height: 50px;：此属性规定了选中元素的高度为 50 像素。与宽度属性类似，高度属性用于控制元素在垂直方向上的尺寸。
• background-color: gray; ：background-color 用于设置元素的背景颜色，这里将背景颜色设置为灰色（gray 是 CSS 中预定义的颜色关键字 ）。除了颜色关键字，还可以使用十六进制颜色值（如 #808080）、RGB 或 RGBA 值（如 rgb(128, 128, 128)、rgba(128, 128, 128, 0.5)，其中 RGBA 最后一个参数表示透明度）等方式来指定背景颜色。

overflow: visible 部分

overflow 属性是 CSS 中用于控制元素内容溢出时的处理方式，它有以下几个常见取值：

• visible ：这是 overflow 的默认值。当元素的内容超出其指定的尺寸（由 width 和 height 等属性定义）时，超出的内容会显示在元素框之外，不会被裁剪，如图中文字描述 "Default behavior → tells the browser to display the overflowing content" 所说，浏览器会正常显示溢出的内容。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .box {
                width: 100px;
                height: 100px;
                background-color: lightgray;
                overflow: visible;
            }
    </style>
</head>

<body>
    <div class="box">这是一段很长很长很长很长很长的文字，超出了盒子的尺寸。</div>
</body>

</html>

在上述代码中，.box 元素设置了固定的宽高，内容超出后由于 overflow: visible，超出部分会直接显示在盒子外面。

• hidden ：如果将 overflow 设置为 hidden，当元素内容超出其尺寸时，超出的部分会被裁剪掉，不会显示在元素框之外。常用于隐藏不必要的溢出内容，使布局更加规整。

.box {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    overflow: hidden;
}

• scroll ：当 overflow 设置为 scroll 时，无论元素内容是否溢出，都会在元素上添加滚动条，用户可以通过滚动条查看溢出的内容。在桌面端浏览器，滚动条的样式可能因浏览器而异；在移动端，滚动体验也会有所不同。

.box {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    overflow: scroll;
}

• auto ：overflow: auto 表示当元素内容没有溢出时，不会显示滚动条；而当内容溢出时，会根据需要自动添加水平或垂直滚动条，以便用户查看溢出部分。它是一种比较常用的取值，能根据实际情况灵活处理内容溢出问题。

.box {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    overflow: auto;
}

overflow 属性在网页布局中非常重要，合理使用它可以有效控制元素内容的显示方式，避免内容溢出对整体布局造成影响 。

6 overflow: scroll

overflow: scroll 是overflow属性的另一个常见取值，它的作用是：

• 强制显示滚动条：无论元素内部的内容是否真的超出了元素的尺寸范围，都会在元素上显示水平滚动条、垂直滚动条或者两者都显示（取决于浏览器的渲染和内容的溢出情况）。即使内容没有溢出，滚动条也会存在。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
       .scroll-box {
            width: 150px;
            height: 100px;
            background-color: lightblue;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="scroll-box">这是一段少量的文字，内容没有超出盒子尺寸，但依然会显示滚动条。</div>
</body>

</html>

在上述代码中，.scroll-box元素内的文字内容并没有超出其宽高范围，但由于设置了overflow: scroll，滚动条还是会显示出来。

• 方便内容浏览 ：当元素内容确实溢出时，用户可以通过滚动条来查看被隐藏在可视区域之外的内容。这在处理大量文本、图片集或者复杂图表等情况时非常实用。比如一个新闻列表区域，当新闻内容较多超出显示范围时，使用overflow: scroll ，用户就可以通过滚动条浏览完整的新闻列表。

overflow 属性其他相关知识

• overflow-x 和 overflow-y ：除了overflow综合设置水平和垂直方向的溢出处理，还可以使用overflow-x专门控制水平方向的溢出，overflow-y专门控制垂直方向的溢出。例如：

.element {
    overflow-x: hidden; /* 水平方向溢出内容隐藏 */
    overflow-y: scroll; /* 垂直方向始终显示滚动条 */
}

• 与其他属性的配合 ：overflow属性常和position属性配合使用。比如，当元素设置为position: fixed或position: absolute，并且内容可能溢出时，overflow属性可以控制这些元素溢出部分的显示方式。同时，在 Flexbox 和 Grid 布局中，overflow属性也会对布局内元素的显示产生影响。
• 浏览器兼容性 ：现代浏览器（如 Chrome、Firefox、Safari、Edge 等）对overflow属性的支持都比较良好，但在一些较老的浏览器版本中，可能需要添加浏览器前缀（如-webkit- 用于 Safari 和旧版 Chrome 等基于 WebKit 内核的浏览器）来确保兼容性。不过随着浏览器的更新迭代，现在对标准 CSS 的支持越来越完善，前缀需求逐渐减少。

总之，overflow属性是 CSS 中控制元素内容显示范围的重要属性，合理运用它的不同取值，可以让网页布局更加灵活、美观且实用。

7 class 是用于指定 CSS 类的属性，而不是 className!!!!

在 Tailwind Play 中，要实现滚动效果，需要注意以下几点：

HTML 部分

！！！！！在 HTML 中，class 是用于指定 CSS 类的属性，而不是 className（className 是 React 中使用的）。

所以需要将 <div className = "container"> 改为 <div class="container">。

修改后的 HTML 代码：

<div class="container">
  <p>this is a long long long long longg long long long longg long long long longg long long long longg long long long longg long long long longg long long long longg long long long longg long long long longg long long long long long long story</p>
</div>

CSS 部分

在 CSS 中，你已经定义了 .container 类，设置了宽度、高度和 overflow: scroll，这部分是正确的：

@tailwind utilities;

.container {
  width: 50px;
  height: 50px;
  overflow: scroll;
}

效果

这样修改后，容器的宽度和高度都是 50px，当里面的文本内容超过这个尺寸时，就会显示滚动条。你可以在 Tailwind Play 中尝试上述修改，应该就能看到滚动条了。

8 overflow:scroll

在 CSS 中，overflow: auto是一个用于控制元素内容溢出时显示方式的属性值 ，以下是详细介绍：

含义

overflow: auto表示当元素的内容超出其指定的尺寸（由width和height属性定义）时，浏览器会根据实际情况自动显示滚动条。也就是说，只有在内容确实溢出了元素边界时，滚动条才会出现；如果内容没有溢出，那么滚动条就不会显示。

与overflow: scroll的区别

• overflow: scroll ：无论元素的内容是否溢出，都会强制显示滚动条（水平滚动条、垂直滚动条或者两者都有，取决于实际内容溢出方向）。 这意味着即使内容完全在元素尺寸范围内，用户也能看到滚动条，只是滚动条处于不可操作状态。
• overflow: auto ：只有当内容超出元素尺寸时，滚动条才会出现。在内容未溢出时，不会占用额外的空间来显示滚动条，这在某些对布局空间要求较高的场景下很有用 。

应用场景

• 节省空间 ：在一些界面设计中，当不确定容器内内容的多少，但又不想滚动条一直占用界面空间时，overflow: auto是一个很好的选择。例如在一个新闻摘要板块，每篇新闻摘要长度不定，如果使用overflow: scroll，即使新闻摘要很短，也会显示滚动条，影响界面美观，而overflow: auto能根据实际摘要长度决定是否显示滚动条。
• 响应式设计 ：在响应式网页中，当元素尺寸会随着屏幕大小变化时，overflow: auto可以灵活地在内容溢出时提供滚动条，而不会对布局产生不必要的影响。比如一个侧边栏菜单，在小屏幕设备上可能内容较多，需要滚动查看，而在大屏幕上内容能完全显示，就不需要滚动条。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .box {
      width: 150px;
      height: 100px;
      background-color: lightgray;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>当内容较少时，没有滚动条。</p>
  </div>
  <div class="box">
    <p>当内容较多，超出容器尺寸时，这里有大量的文本内容，当内容较多，超出容器尺寸时，这里有大量的文本内容，当内容较多，超出容器尺寸时，这里有大量的文本内容，当内容较多，超出容器尺寸时，这里有大量的文本内容，当内容较多，超出容器尺寸时，这里有大量的文本内容。</p>
  </div>
</body>

</html>

在上述代码中，两个具有相同类名.box的div元素，设置了overflow: auto，当内容较少时，滚动条不会出现；而内容较多超出容器尺寸时，滚动条就会自动显示。

9 animation-delay

在 CSS 中，animation-delay是**@keyframes**规则创建动画序列的一个属性，用于指定动画开始执行前的延迟时间。结合你提供的图片内容，以下是详细介绍：

基本概念

animation-delay 决定了从元素加载完成到动画开始执行之间的时间间隔，单位可以是秒（s） 或毫秒（ms）。

比如 animation-delay: 2s; 表示动画会在元素加载完成 2 秒后开始播放。

语法

animation-delay 通常和 animation 属性一起使用，也可以单独使用。

• 与 animation 属性简写形式一起使用 ：animation 是一个简写属性，它可以同时设置动画名称、持续时间、延迟时间、播放次数、播放方向等多个动画相关属性。例如：

.element {
  animation: fadeIn 5s 2s; /* 依次表示动画名称为fadeIn，持续时间5秒，延迟时间2秒 */
}

• 单独使用 animation-delay 属性：

.element {
  animation-name: fadeIn;
  animation-duration: 5s;
  animation-delay: 2s; /* 单独设置延迟时间为2秒 */
}

示例分析（结合图片代码）

图片中的代码设置了一个名为 fadeIn 的动画：

.container {
  animation: fadeIn;
  animation-duration: 5s;
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

在上述代码中，.container 元素应用了 fadeIn 动画，动画持续时间为 5 秒，但没有设置 animation-delay，这意味着动画会在页面加载完成后立即开始执行，元素会从透明度为 0 逐渐过渡到透明度为 1。

如果要添加延迟效果，比如让动画在页面加载 3 秒后再开始执行，可以这样修改代码：

.container {
  animation: fadeIn;
  animation-duration: 5s;
  animation-delay: 3s; /* 添加延迟3秒 */
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

这样，在页面加载后的前 3 秒，.container 元素会保持初始状态（透明度为 0），3 秒后才开始执行动画，逐渐变为完全不透明（透明度为 1）。

应用场景

• 页面元素渐显 ：在网页加载时，为了避免元素突然出现显得生硬，可以使用 animation-delay 配合透明度、位置等动画，让元素在页面加载一段时间后，以动画的形式逐渐显示出来，提升用户体验。
• 动画序列编排 ：当页面中有多个动画需要按顺序执行时，可以通过设置不同的 animation-delay 值来控制动画的执行顺序。比如先让一个标题从上方滑入，延迟 1 秒后，让标题下方的正文内容以淡入的方式显示出来。
• 广告展示：在广告页面中，广告元素可以设置一定的延迟时间后再开始播放动画，吸引用户注意力 。

注意事项

• 负值的 animation-delay 也是允许的。如果设置为 -2s，表示动画从其执行过程中 -2s 对应的状态开始，即动画会跳过前 2 秒的执行过程，直接从第 2 秒的状态开始显示，直到动画结束。
• animation-delay 设置的时间是相对于元素加载完成的时间点，而不是页面整体加载完成的时间点。如果一个元素是通过 JavaScript 动态插入到页面中的，那么延迟时间是从元素插入到 DOM 树中开始计算的。

10 CSS 动画的时间函数（animation-timing-function）

图中展示的是 CSS 动画相关的代码与内容，涉及到**CSS 动画的时间函数（animation-timing-function)**等实体知识。

在 CSS 动画中，animation-timing-function 属性用于规定动画的速度曲线，它决定了动画在整个周期内的速度变化方式，从而影响动画的视觉效果流畅度与节奏。

图中代码里使用了 ease-out 时间函数，它的特点是动画开始时速度较快，然后逐渐变慢，能让动画在结束阶段显得更加柔和自然。除此之外，常见的时间函数还有：

• ease（默认值）：动画开始时缓慢，中间变快，结束时又变慢。
• ease-in：动画开始时缓慢，之后逐渐加快。
• ease-in-out：动画开始和结束时都缓慢，中间过程加快。
• linear：动画以恒定的速度从头到尾进行，没有速度变化。