1.-Loader by satyamchaudharydev（上）

Zeworl_rod
290 阅读10分钟

一、前言

由于总是粗略接触了一些但是学了又忘，因此对前端知之甚少，秉承着在实践中学习的原则，笔者将对代码涉及的前端知识进行梳理。

PixPin_2024-05-06_00-02-32.png

很常见的一个通用加载加载框，在重写的过程中想到能否将其转化为具有一定操作逻辑和美观性的元素，于是在复现的基础上重写成了一个可交互的加载样式如下。

加载框在鼠标悬停时会出现文字点按后停止加载，更换文字显示，再次点按继续加载。

PixPin_2024-05-06_00-35-06.png PixPin_2024-05-06_00-35-40.png

PixPin_2024-05-06_00-36-16.png

同时发现源代码存在bug导致伪元素动画开始和结时超出指定范围导致动画不流畅的问题，并进行了修复。

为了确保.loader::before伪元素在动画执行过程中始终保持与其父元素.loader相同的圆角度，并且不超出其背景范围，我们将.loader的overflow属性设置为hidden，这样任何超出其边界的子元素都会被裁剪掉，包括动画中的.loader::before伪元素。

二、原代码及Debug

<div class="loader"></div>

.loader {
  display: block;
  --height-of-loader: 4px;
  --loader-color: #0071e2;
  width: 130px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;/*修复伪元素在动画开始和结尾显示异常问题*/
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;
  ;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

三、涉及前端知识梳理

一、.loader 类

display: block; 设置元素为块级元素，使其占据一整行，
  • CSS中的八种显示类型：
  1. 块级元素（Block Elements）display: block;
    • 占据完整的宽度：默认情况下，块级元素会占据其父元素的完整宽度，无论其实际内容大小。
    • 垂直堆叠：块级元素会在垂直方向上一个接一个地排列。
    • 可设置宽高：可以通过CSS直接设置块级元素的宽度和高度
  2. 内联元素（Inline Elements） - display: inline;
    • 不会独占一行，其宽度仅足以容纳其内容。
    • 不能设置宽度和高度。
    • 常用于文本内的小段样式更改，如<span>、<a>等。
  3. 内联块元素（Inline-Block Elements） - display: inline-block;
    • 结合了内联元素和块级元素的特性。
    • 不会独占一行，但可以设置宽度和高度。
  4. 表格相关元素
    • display: table;、display: table-row;、display: table-cell;等，用于布局时模拟表格行为。
  5. 弹性盒子（Flexbox） - display: flex;
    • 使容器能够变化其子项的宽度、高度（和顺序）以最佳方式填充可用空间（主要用于一维布局）。
  6. 网格（Grid） - display: grid;
    • 为CSS提供了网格布局的能力，允许在两个维度上对元素进行布局（行和列），非常适合创建复杂的网页布局。
  7. 无（None） - display: none;
    • 元素不会被显示，也不会占据页面上的空间。
  8. 列表项（List Item） - display: list-item;
    • 使元素表现为列表项，通常与list-style属性一起使用，以定义列表项的标记类型。
  • HTML默认元素显示类型：
  • 块级元素（Block-level elements）
    • <div>：display: block;
    • <p>：display: block;
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>：display: block;
    • <ol>：display: block;
    • <ul>：display: block;
    • <li>：display: list-item;（特殊的块级显示类型）
    • <table>：display: table;
    • <header>, <footer>, <section>, <article>, <nav>, <aside>：display: block;
  • 内联元素（Inline elements）
    • <span>：display: inline;
    • <a>：display: inline;
    • <img>：display: inline;
    • <label>：display: inline;
    • <input>：display: inline-block;（特殊情况，表现类似于内联元素，但允许设置宽高）
    • <button>：display: inline-block;（同上）
    • <textarea>：display: inline-block;（同上）
    • <select>：display: inline-block;（同上）
  • CSS属性设置：
  1. 直接属性设置 (width: 130px;):
    • 这是CSS中的直接属性设置方式，用于指定元素的宽度为130像素。
    • 这种设置方式直接作用于元素，对元素的布局和外观产生即时影响。
  2. CSS自定义属性（或变量） (--height-of-loader: 4px;):
    • 这是CSS自定义属性（也称为CSS变量）的声明方式，以--开头，后跟变量名。
    • 自定义属性可以在文档的任何地方被重复使用，通过var(--variable-name)的方式引用。
    • 在这个例子中，--height-of-loader是一个自定义属性，其值被设置为4px。这个值本身不会直接影响任何元素，除非通过var(--height-of-loader)的方式在具体的CSS属性中引用它。这种自定义属性的使用增加了CSS的灵活性和可维护性，特别是在需要多次重复使用某些值时。
  • CSS定位方式：
  • position: relative; 设置元素的定位为相对定位，这对于其子元素的绝对定位是必要的。
    • 在CSS中，position: relative; 对元素的定位方式进行设置，使元素相对于其正常位置进行定位。具体效果包括：
      1. 不脱离文档流：使用position: relative;的元素仍然保持在文档流中，即它原本占据的空间仍然保留。
    • 2.偏移定位：可以通过top、right、bottom、left属性来指定元素相对于其正常位置的偏移。这些偏移不会影响其他元素的位置。、

除此之外css还有以下定位方式：

  1. static:
    • 默认值。元素按照正常的文档流进行布局，top、right、bottom、left和z-index属性不会影响其位置。
  2. absolute:
    • 元素从正常的文档流中脱离，并相对于其最近的已定位（非static）的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是<html>元素）。
  3. fixed:
    • 元素从正常的文档流中脱离，并相对于浏览器窗口进行定位。即使页面滚动，元素也会保持在指定的位置。
  4. sticky:
    • 是一种特殊类型的定位，它基于用户的滚动位置而变化。元素根据正常文档流进行定位，但在达到某个滚动位置时，它会像fixed定位一样固定在指定位置。这通常用于制作当页面滚动到一定位置时才固定在顶部或底部的导航栏。 absolute定位常用于创建覆盖在其他内容上的元素，fixed定位用于创建固定在视口的元素，而sticky定位则用于创建在用户滚动页面时动态变化位置的元素。

.loader::before 伪元素

伪元素是CSS中的一个特性，它允许你为元素的某个部分设置样式，即使这部分在HTML文档树中没有实际的DOM元素。伪元素可以用来添加装饰性内容、样式特定的部分（如元素的第一行或第一个字母），或实现布局效果，而无需添加额外的HTML标记。

.loader::before是一个伪元素的例子。这里的::before伪元素用于在.loader元素的内容前面插入一个空的内容块，这个内容块通过CSS进行样式设置和布局，而不需要在HTML中手动添加额外的元素。

伪元素的语法是在伪元素名称前加上两个冒号::（CSS2中是一个冒号，但CSS3推荐使用两个冒号来区分伪元素和伪类）。常见的伪元素包括：

  • ::before：在元素内容的前面插入内容。
  • ::after：在元素内容的后面插入内容。
  • ::first-line：用于选择元素的第一行。
  • ::first-letter：用于选择元素的第一个字母。
  • ::selection：用于选择元素被用户选中的部分。

伪元素::before和::after通常与content属性一起使用，content属性定义了要插入的内容。在上述代码示例中，content: "";表示插入一个空的内容块，然后可以通过其他CSS属性（如background、position、width、height等）对这个内容块进行样式设置和布局。这种方法常用于添加装饰性元素或实现复杂的布局效果。

  • content: ""; 设置伪元素的内容为空，这是创建伪元素的必要条件。
  • position: absolute; 设置伪元素的定位为绝对定位，相对于其最近的已定位的父元素（这里是.loader）。
animation: moving 1s ease-in-out infinite; 应用名为moving的关键帧动画，动画时长1秒，动画效果先加速后减速，无限循环。

在CSS中，animation属性是一个简写属性，用于配置动画效果。允许你在一个声明中设置多个动画属性，包括动画名称、持续时间、延迟、次数、方向等。下面是animation属性的基本用法：

element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
  • name：定义动画的名称，这个名称与@keyframes规则中定义的动画名称相对应。
  • duration：动画完成一个周期所花费的时间，以秒(s)或毫秒(ms)为单位。
  • timing-function：动画的速度曲线，例如linear、ease、ease-in、ease-out等。
  • delay：动画开始之前的延迟时间，以秒(s)或毫秒(ms)为单位。
  • iteration-count：动画应该播放的次数，可以是数字或infinite表示无限次播放。
  • direction：动画播放的方向，例如normal、reverse、alternate、alternate-reverse。
  • fill-mode：定义动画在执行之前和之后如何将样式应用于其目标，例如none、forwards、backwards、both。
  • play-state：允许控制动画的播放和暂停，取值为running或paused。

不是所有的属性都必须指定。如果某些属性未指定，它们将使用默认值。

例如，创建一个简单的淡入效果：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

element {
  animation: fadeIn 2s ease-in 0s 1 normal both;
}

这个例子中，fadeIn动画将元素从完全透明（opacity: 0）渐变到完全不透明（opacity: 1），动画持续时间为2秒，使用ease-in速度曲线，没有延迟，只播放一次，并且在动画结束时保持最终状态。

在CSS动画和过渡中，timing-function属性用于定义动画或过渡的速度曲线。这个属性决定了动画在其持续时间内的变化速率。linear、ease、ease-in、ease-out是timing-function的几种常用值：

  1. linear:
    • 动画以相同的速度从开始到结束进行。这意味着动画的速度是恒定的。
  2. ease:
    • 动画以低速开始，然后加速，在结束前变慢。这是大多数动画的默认速度曲线，因为它模拟了物体在现实世界中的自然运动。
  3. ease-in:
    • 动画以低速开始，逐渐加速直到结束。这种曲线使得动画在开始时较慢，适用于需要强调动画开始阶段的场景。
  4. ease-out:
    • 动画以高速开始，然后减速直到结束。这种曲线使得动画在结束时较慢，适用于需要强调动画结束阶段的场景。

.loader::before使用的ease-in-out曲线结合了ease-in和ease-out的特点：动画在开始和结束时速度较慢，在中间阶段速度较快，这样可以使动画看起来更平滑。

、

avatar
文章
阅读
粉丝