大家好，本篇文章小编将和大家一起完成两个案例效果：三角板 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;
最低0.47元/天 解锁文章
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
