手写原生代码专题 | 三角板 Loading 效果和骨架屏图片卡片预加载效果（三）

悠悠 2022-09-04 06:50 161阅读 0赞

![d43046f28df9c5cdeb8021f0967930b6.png][]

大家好，本篇文章小编将和大家一起完成两个案例效果：三角板 Loading 效果和骨架屏图片卡片预加载效果，一起动手实践吧！

## 一、三角板 Loading 效果 ##

如下动图所示，两个三角板相差90度依次交替顺时针旋转，是不是很酷呢？

![541404fabf056d4daa87f50707980571.gif][]

基于以上动图效果，如何实现呢？

*  基于 CSS 的方式通过 DIV 的 border 属性绘制两个顶角向上图形重合的正三角形
 *  然后顺时针旋转其中一个三角形，让其相差90度（旋转的中心，在 DIV 的中心即三角形的顶点）
 *  然后定义动画属性，让两个三角形相差90度的进行无限循环旋转。

做这个动画的思路就这些，是不是很简单呢，接下来我们动手实践吧

### 1.1、 创建 HTML 结构 ###

HTML文件结构很简单，就是一个 div ，用来实现三角形。

### 1.2、编写CSS代码 ###

编写CSS的思路如下，最重要的是要理解如何用 Div 实现三角形，具体的实现思路如下：

*  首先定义动画容器 kinetic 的宽和高 80px，让其垂直水平居中
 *  然后使用 before 和 after 伪类，绘制两个三角形（宽高为0，定义边框宽度为50px，底边背景颜色为白色，其他边框颜色透明，就绘制出两个顶角朝上的背景色为白色正三角形）
 *  顺时针旋转其中一个三角形90度，然后分别定义旋转动画，让其对应的动画在时间线上相差90度。

思路就聊到这里，具体的 CSS 代码如下所示：

* {
      box-sizing: border-box;
    }
    
    body {
      background-color: #2c3e50;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      margin: 0;
    }
    
    .kinetic {
      position: relative;
      height: 80px;
      width: 80px;
    }
    
    .kinetic::after,
    .kinetic::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: #fff;
      animation: rotateA 2s linear infinite 0.5s;
    }
    
    .kinetic::before {
      transform: rotate(90deg);
      animation: rotateB 2s linear infinite;
    }
    
    @keyframes rotateA {
      0%,
      25% {
        transform: rotate(0deg);
      }
    
      50%,
      75% {
        transform: rotate(180deg);
      }
    
      100% {
        transform: rotate(360deg);
      }
    }
    
    @keyframes rotateB {
      0%,
      25% {
        transform: rotate(90deg);
      }
    
      50%,
      75% {
        transform: rotate(270deg);
      }
    
      100% {
        transform: rotate(450deg);
      }
    }

到这里本案例就介绍完了，大家可以点击文末的阅读原文进行体验，如果你想获取源码，请查看文末获取源码的方式进行获取。

## 二、骨架屏图片卡片预加载效果 ##

首先我们先了解下什么是骨架屏，骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通畅，不会造成网页长时间白屏或者闪烁。这就是 Skeleton Screen ！

了解完骨架屏后，我们先实现一个图片卡片预加载的轮廓效果，先通过这个简单示例，简单的了解下是如何实现的，原理理解后，我们就明白如何实现一个骨架屏了，具体的效果展示如下：

![6d65826d69d84b1bbb9b959c06f035e7.gif][]

基于这个示例效果，你会如何实现呢？

*  首先我们先用 HTML和CSS 创建卡片的基础轮廓
 *  然后通过 JS 获取卡片的对应的图片、标题、用户头像、信息对应的DOM元素
 *  数据请求完成后，然后将数据填充至对应的DOM元素

思路就聊到这里，是不是很简单，我们一起动手实践吧！

### 2.1、 创建 HTML 结构 ###

首先我们先创建卡片的基本结构，卡片包含图片、标题、介绍、作者相关信息元素，然后基于这些元素，通过CSS初始化默认的轮廓效果。HTML的结构比较简单，示例代码如下：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Content Placeholder</title>
      </head>
      <body>
        <div class="card">
          <div class="card-header animated-bg" id="header"> </div>
    
          <div class="card-content">
            <h3 class="card-title animated-bg animated-bg-text" id="title">
               
            </h3>
            <p class="card-excerpt" id="excerpt">
               
              <span class="animated-bg animated-bg-text"> </span>
              <span class="animated-bg animated-bg-text"> </span>
              <span class="animated-bg animated-bg-text"> </span>
            </p>
            <div class="author">
              <div class="profile-img animated-bg" id="profile_img"> </div>
              <div class="author-info">
                <strong class="animated-bg animated-bg-text" id="name"
                  > </strong
                >
                <small class="animated-bg animated-bg-text" id="date"> </small>
              </div>
            </div>
          </div>
        </div>
    
        <script src="script.js"></script>
      </body>
    </html>

在需要显示轮廓的地方，我们定义 animated-bg、animated-bg-text 样式，需要填充的内容我们现用 &nbsp; 符号进行占位，等JS拿到数据内容后，然后动过DOM 相关的API进行内容的填充。

### 2.2、编写CSS代码 ###

要实现轮廓预加载的背景渐变效果，animated-bg 的定义比较关键，这里我们使用颜色渐变创建灰色线性渐变的背景，然后 CSS 帧动画属性动态更改 background-position 的位置, 就有了线条的动画效果，具体的代码内容如下：

* {
      box-sizing: border-box;
    }
    
    body {
      background-color: #ecf0f1;
      font-family: 'Roboto', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      margin: 0;
    }
    
    img {
      max-width: 100%;
    }
    
    .card {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      overflow: hidden;
      width: 350px;
    }
    
    .card-header {
      height: 200px;
    }
    
    .card-header img {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }
    
    .card-content {
      background-color: #fff;
      padding: 30px;
    }
    
    .card-title {
      height: 20px;
      margin: 0;
    }
    
    .card-excerpt {
      color: #777;
      margin: 10px 0 20px;
    }
    
    .author {
      display: flex;
    }
    
    .profile-img {
      border-radius: 50%;
      overflow: hidden;
      height: 40px;
      width: 40px;
    }
    
    .author-info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 10px;
      width: 100px;
    }
    
    .author-info small {
      color: #aaa;
      margin-top: 5px;
    }
    
    .animated-bg {
      background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 10%,
        #f6f7f8 20%,
        #f6f7f8 100%
      );
      background-size: 200% 100%;
      animation: bgPos 1s linear infinite;
    }
    
    .animated-bg-text {
      border-radius: 50px;
      display: inline-block;
      margin: 0;
      height: 10px;
      width: 100%;
    }
    
    @keyframesbgPos {
      0% {
        background-position: 50% 0;
      }
    
      100% {
        background-position: -150% 0;
      }
    }

### 2.3、编写 JS 代码 ###

最后我们来编写 JS 代码，我们先定义数据填充方法 getData()，我们一般通过请求接口的方式进行数据填充，为了方便演示，这里我们直接定义数据变量替换 DOM 相关的内容，替换完后，移除背景的样式。定义完成后，最后我们通过 setTimeout 方法模拟接口的数据请求，调用我们刚才的 getData() 方法替换预加载的轮廓效果。思路就聊到这里，示例代码如下所示：

const header = document.getElementById('header')
    const title = document.getElementById('title')
    const excerpt = document.getElementById('excerpt')
    const profile_img = document.getElementById('profile_img')
    const name = document.getElementById('name')
    const date = document.getElementById('date')
    
    const animated_bgs = document.querySelectorAll('.animated-bg')
    const animated_bg_texts = document.querySelectorAll('.animated-bg-text')
    
    setTimeout(getData, 2500)
    
    function getData() {
      header.innerHTML =
        '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
      title.innerHTML = 'Lorem ipsum dolor sit amet'
      excerpt.innerHTML =
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
      profile_img.innerHTML =
        '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
      name.innerHTML = 'John Doe'
      date.innerHTML = 'Oct 08, 2020'
    
      animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
      animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
    }

骨架屏图片卡片的预加载效果到这里就完成了，是不是很简单呢，基于这个思路，你可以尝试做一下完整的骨架屏加载效果。

## 三、结束语 ##

到这里，这两个案例就完成了，如果你想体验本案例的效果，可以点击阅读原文体验，如果你想获取本案例源码，请关注“前端达人”公众号，回复“a3”。感谢你的阅读。

## 相关阅读 ##

[手写原生代码专题 | 图片拖拽效果（一）][Link 1]

[手写原生代码专题 | 简易手写画板（二）][Link 2]

[d43046f28df9c5cdeb8021f0967930b6.png]: /images/20220829/d2df656c791946a2b42694f2fded07b4.png
[541404fabf056d4daa87f50707980571.gif]: /images/20220829/0c782660c71946b3acd015be770ce620.png
[6d65826d69d84b1bbb9b959c06f035e7.gif]: /images/20220829/1616cf434d50406cb5caaa1cd9818516.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a6f32491d17a320e39eec621830824a830aae4f06a550eef95f9a07f6b181b6eefb91e7d14&idx=1&mid=2247491736&scene=21&sn=9691e6721fd0fec4d17ec30c243a7952#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a6f10891d1781e7e3887e0f8681737b138aebd98a32e9ad66aac0c00a43dcf4d24405a2327&idx=1&mid=2247492276&scene=21&sn=3f65897a156114178a51a54a51fc5f79#wechat_redirect