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

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/119620227

本文介绍了如何使用HTML、CSS和JS实现三角板Loading动画和骨架屏图片卡片预加载效果。详细讲解了创建HTML结构、编写CSS代码以及JS代码的步骤，包括三角形的绘制、动画的实现以及数据填充方法。提供了案例的实现思路和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、三角板 Loading 效果

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

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

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

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

1.1、创建 HTML 结构

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

<!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>Kinetic Loader</title>
  </head>
  <body>
    <div class="kinetic"></div>
  </body>
</html>

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;
  o