Advanced CSS and Sass_学习记录_Natours_02_animation_keyframes_transform_boxshadow_pseudoelement

Advanced CSS and Sass_学习记录_Natours_02_animation_keyframes_transform_boxshadow_pseudoelement

本篇学习笔记将结合一段完整的代码，重点解释class02、class03、class04的CSS代码，深入解析这些高级CSS技巧的实现方法和注意事项。

一、代码概览

首先，让我们看看这三节课程已经完成的代码片段：

/* class 02 */
.header {
    position: relative;
    height: 95vh;
    background-image: linear-gradient(to right bottom,
     hsla(111, 55%, 64%, 0.8), 
     hsla(160, 64%, 43%, 0.8)),
      url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

.logo-box {
    position: absolute;
    left: 35px;
    top: 35px;
}

.text-box {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.header-primary {
    color: #fff;
    text-transform: uppercase;
    /* class04 */
    text-align: center;
}

.header-primary-main {
    /* class02 */
    display: block;
    font-size: 95px;
    font-weight: 400;
    letter-spacing: 35px;
    /* class03 */
    animation-name: moveInLeft;
    animation-duration: 1s;
}

.header-primary-sub {
    /* class02 */
    display: block;
    font-size: 35px;
    letter-spacing: 18.8px;
    /* class03 */
    animation: moveInRight 1s;
    /* class04 */
    margin-bottom: 60px;
}

/* class 03 */
@keyframes moveInLeft {
    0% {
        transform: translate(-100px);
        opacity: 0;
    }
    80% {
        transform: translate(10px);
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes moveInRight {
    0% {
        transform: translate(100px);
        opacity: 0;
    }
    80% {
        transform: translate(-10px);
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}

/* class04 */
.btn {
    font-size: 20px;
    display: inline-block;
    padding: 15px 35px;
    border-radius: 100px;
    transition: all .2s;
}

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

.btn:visited,
.btn:link {
    text-decoration: none;
    color: #000;
}

.btn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    transform: translateY(-3px);
}

.btn:active {
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

接下来，我们将逐一解释这些代码段中的关键部分。

二、class02 部分详解

1. .header 背景与剪裁

.header {
    position: relative;
    height: 95vh;
    background-image: linear-gradient(to right bottom,
     hsla(111, 55%, 64%, 0.8), 
     hsla(160, 64%, 43%, 0.8)),
      url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

解析：

• position: relative;

  • 设置元素为相对定位，为内部绝对定位的子元素提供参考。

• height: 95vh;

  • 设置元素高度为视口高度的95%，使其自适应屏幕高度。

• background-image

  • 使用线性渐变和背景图片的组合，实现叠加效果。
  • linear-gradient(to right bottom, hsla(111, 55%, 64%, 0.8), hsla(160, 64%, 43%, 0.8))
    • 创建一个从左上角到右下角的线性渐变，使用半透明的绿色调色。
  • url(../img/hero.jpg)
    • 添加背景图片。

• 背景图片叠加顺序

  • CSS中，背景图片从下到上绘制，先绘制第一个，后面的覆盖在上面。
  • 这里，线性渐变在背景图片之上，形成半透明的遮罩效果。

• background-size: cover;

  • 背景图片缩放以完全覆盖容器，可能会裁剪部分图片。

• background-position: top;

  • 背景图片从顶部开始定位。

• clip-path: polygon(...)

  • 使用多边形裁剪，使元素呈现不规则的形状。
  • 参数解析：
    • (0 0, 100% 0, 100% 75vh, 0 100%)定义了一个四边形的四个顶点。
    • 形成了一个底部斜切的效果。

2. .logo-box 及 .text-box 定位

.logo-box {
    position: absolute;
    left: 35px;
    top: 35px;
}

• position: absolute;

  • 使元素脱离文档流，相对于最近的定位祖先（这里是.header）进行定位。

• left: 35px; top: 35px;

  • 从父元素的左上角偏移35像素，定位徽标的位置。

.text-box {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

• 居中对齐方法：

  • left: 50%; top: 40%;

    • 将元素的起始点定位到父元素的50%宽度和40%高度处。

  • transform: translate(-50%, -50%);

    • 使用CSS3的transform属性，将元素自身向左、向上移动自身宽度和高度的50%，达到精确的居中效果。

3. 标题样式设置

.header-primary {
    color: #fff;
    text-transform: uppercase;
    /* class04 */
    text-align: center;
}

• text-transform: uppercase;

  • 将文本转换为大写。

• text-align: center;

  • 将文本内容水平居中。

.header-primary-main {
    display: block;
    font-size: 95px;
    font-weight: 400;
    letter-spacing: 35px;
    animation-name: moveInLeft;
    animation-duration: 1s;
}

• display: block;

  • 将元素设为块级元素，使其占据整行。

• font-size 和 letter-spacing

  • 调整字体大小和字母间距。

• animation-name 和 animation-duration

  • 为元素指定动画名称和持续时间，具体动画在后续解释。

.header-primary-sub {
    display: block;
    font-size: 35px;
    letter-spacing: 18.8px;
    animation: moveInRight 1s;
    margin-bottom: 60px;
}

• animation 简写属性

  • animation: moveInRight 1s;等同于分别指定动画名称和持续时间。

• margin-bottom: 60px;

  • 添加底部外边距，为下方内容留出空间。

三、class03 部分详解

1. CSS动画的实现

@keyframes moveInLeft {
    0% {
        transform: translate(-100px);
        opacity: 0;
    }
    80% {
        transform: translate(10px);
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}

• @keyframes 规则

  • 定义动画的关键帧，描述从起始到结束的状态变化。

• 动画解析：

  • 0%：动画开始时，元素向左偏移100px，完全透明。
  • 80%：动画进行到80%时，元素向右偏移10px。
  • 100%：动画结束时，元素回到原位，完全不透明。

• opacity

  • 控制元素的透明度，从0（完全透明）到1（完全不透明）。

• 同理，moveInRight 动画：

  • 元素从右侧移入，过程与moveInLeft相似，但方向相反。

2. 动画的应用

.header-primary-main {
    animation-name: moveInLeft;
    animation-duration: 1s;
}

• animation-name

  • 指定要使用的动画名称。

• animation-duration

  • 指定动画持续时间。

.header-primary-sub {
    animation: moveInRight 1s;
}

• animation 简写属性
  • 一行代码指定动画的多个属性，包括名称和持续时间。

扩展：

• 更多动画属性
  • animation-delay：动画延迟时间。
  • animation-timing-function：动画的速度曲线，例如ease、linear等。
  • animation-iteration-count：动画的播放次数。

四、class04 部分详解

1. 按钮的样式与交互效果

.btn {
    font-size: 20px;
    display: inline-block;
    padding: 15px 35px;
    border-radius: 100px;
    transition: all .2s;
}

• display: inline-block;

  • 使元素具备块级元素的特性即可以设置自己的宽高内外边距，但仍然与其他元素在一行内排列。

• inline-block 元素的居中对齐方法：

  • 将父元素的text-align设置为center，即可使子元素水平居中。

• padding 和 border-radius

  • 调整按钮的内边距和圆角。

• transition

  • 设置过渡效果，参数all会应用到所有变化上。

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

• background-color
  • 为按钮设置背景色。

.btn:visited,
.btn:link {
    text-decoration: none;
    color: #000;
}

• 伪类选择器
  • :link：未访问的链接。
  • :visited：已访问的链接。
  • 移除文本装饰线，并设置文字颜色。

.btn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    transform: translateY(-3px);
}

• :hover 伪类

  • 鼠标悬停时的样式。

• box-shadow

  • 添加阴影效果，参数依次为：水平偏移、垂直偏移、模糊半径、颜色。
  • 使用rgba颜色，可以控制阴影的透明度。

• transform: translateY(-3px);

  • 元素向上移动3px，模拟浮起的效果。

.btn:active {
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

• :active 伪类

  • 鼠标按下时的样式。

• 效果解析：

  • 减小阴影和位移，使按钮看起来被按下。

2. 文本的居中对齐

.header-primary {
    text-align: center;
}

• text-align: center;
  • 将文本内容以及inline或inline-block元素水平居中。

总结：

• 使用text-align: center;可以方便地使行内或行内块元素居中，而不需要设置元素的宽度或外边距。

五、总结

CSS高级技巧总结如下：

• 背景图片的叠加与裁剪

  • 通过background-image的多层次叠加，实现渐变与图片的融合。
  • 使用clip-path创建不规则形状，丰富页面布局。

• 元素的精确定位与居中

  • 结合position和transform，在未知元素尺寸的情况下，实现精确的居中对齐。

• CSS动画的定义与应用

  • 利用@keyframes定义关键帧动画，控制元素的移动、透明度等属性。
  • 使用animation属性，将动画应用到元素，并可进一步控制其细节。

• 按钮的交互效果与阴影

  • 通过box-shadow添加阴影，增强视觉层次感。
  • 使用transform和transition，实现按钮的动态交互效果。

• inline-block元素的居中方法

  • 利用text-align: center;使inline-block元素水平居中，简单而有效。

• 伪类选择器的应用

  • 使用:link、:visited、:hover、:active等伪类，为元素在不同状态下添加特定样式。

下面是实现效果演示：