Advanced CSS and Sass_学习记录_Natours_03_按钮动画_::after_z-index

学习笔记：深入理解CSS中的::after伪元素、animation-fill-mode和z-index

在class05中学习了按钮的动画效果，包括::after伪元素、animation-fill-mode属性和z-index属性。

/* class05 */
@keyframes moveInButton {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}

.btn-white::after {
    background-color: #fff;
}

.btn:hover::after {
    transform: scaleX(1.5) scaleY(1.4);
    opacity: 0;
}

.btn-animated {
    animation: moveInButton .7s ease-out .5s;
    animation-fill-mode: backwards;
}

一、`::after`伪元素的使用

1. 基本概念

::after是CSS中的一个伪元素，用于在选定的元素之后插入内容。它通常与content属性一起使用，可以在不改变HTML结构的情况下，向页面添加装饰性内容。

2. 代码解析

.btn::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}

content: ""：这是必需的，用于生成伪元素。如果不设置content，::after伪元素将不会被渲染。
display: inline-block：将伪元素设置为inline-block，使其具有块级元素的特性，同时保持行内元素的特性。
width: 100%; height: 100%;：使伪元素的尺寸与父元素（即.btn）相同。
border-radius: 100px;：为伪元素添加圆角，使其呈现为圆形或椭圆形，这里用于实现按钮的圆角效果。
position: absolute; top: 0; left: 0;：将伪元素定位到父元素的左上角。需要注意，父元素（.btn）应设置position: relative;以建立定位上下文。
z-index: -1;：将伪元素的层级设置为比父元素低，使其位于父元素的下方。
transition: all .4s;：为伪元素添加过渡效果，以实现平滑的动画变化。

3. 实现效果

通过上述设置，::after伪元素被用作按钮的背景。在按钮的正常状态下，它与按钮重叠，但由于z-index: -1;，它位于按钮的下方。当鼠标悬停在按钮上时，伪元素会发生变形，产生视觉上的交互效果。

二、`animation-fill-mode`属性

1. 基本概念

animation-fill-mode属性用于指定动画在执行之前和之后，动画效果如何应用到元素的样式上。

2. 属性值详解

none：默认值。动画执行前后，元素样式不会受到动画影响。
forwards：动画结束后，元素将保持最后一个关键帧的样式。
backwards：在动画延迟期间，元素将应用动画的第一个关键帧样式。
both：元素在动画延迟期间和结束后，都会应用相应的关键帧样式。

3. 代码解析

.btn-animated {
    animation: moveInButton .7s ease-out .5s;
    animation-fill-mode: backwards;
}

animation: moveInButton .7s ease-out .5s;：为元素添加动画。
- moveInButton：动画名称，对应于定义的@keyframes moveInButton。
- .7s：动画持续时间。
- ease-out：动画的过渡曲线。
- .5s：动画的延迟时间。
animation-fill-mode: backwards;：在动画延迟期间，元素将应用动画的起始样式（即第一个关键帧的样式）。

4. 实现效果

由于设置了.5s的延迟时间，如果不使用animation-fill-mode: backwards;，在延迟期间元素将保持其初始样式，可能会导致闪烁或布局问题。通过设置backwards，元素在动画延迟期间会应用第一个关键帧的样式，确保视觉上的连续性。

三、`z-index`属性

1. 基本概念

z-index属性用于设置元素的堆叠顺序，决定元素在Z轴（深度方向）上的显示层级。具有更高z-index值的元素会覆盖较低z-index值的元素。

2. 代码解析

.btn::after {
    /* ... */
    z-index: -1;
    /* ... */
}

z-index: -1;：将伪元素的堆叠顺序设置为-1，使其位于父元素之下。

3. 使用注意

定位上下文：z-index属性只对定位元素（即position为relative、absolute、fixed或sticky）有效。
堆叠上下文：z-index的比较只在同一个堆叠上下文中有效，新的堆叠上下文会影响z-index的计算。

4. 实现效果

通过设置z-index: -1;，将::after伪元素放置在按钮的下方，起到背景的作用。当伪元素发生变形或动画时，不会遮挡按钮的文本或其他内容。

四、综合效果实现

结合上述知识点，代码实现了一个具有交互效果的按钮。完整的流程如下：

按钮结构：使用HTML的<a>或<button>元素，添加btn和btn-white等类名。
按钮样式：通过.btn类设置基础样式，包括字体、内边距、圆角和定位等。
伪元素背景：使用::after伪元素为按钮添加可控的背景层，设置尺寸、位置、圆角和过渡效果。
悬停效果：在.btn:hover::after中，改变伪元素的transform和opacity，实现放大和淡出的效果。
```
.btn:hover::after {
    transform: scaleX(1.5) scaleY(1.4);
    opacity: 0;
}
```
动画效果：为按钮添加moveInButton动画，并设置animation-fill-mode: backwards;，使按钮在加载时从下方滑入。
```
.btn-animated {
    animation: moveInButton .7s ease-out .5s;
    animation-fill-mode: backwards;
}
```