为什么要做加载
只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载
我是如何做的
不同的页面, 对加载的设计也就可能不同. 本文设计的加载适合大多数页面.
并且, 本文假设读者已经非常熟悉伪元素, CSS 动画属性和keyframe, 如果读者想重温, 下面两篇文章可做参考
学会使用 CSS 中的 :after 和 :before
keyframe 动画直通车
开始入门
在开始一起构建它前, 我们先看看它最后的效果
 |
正如你所看到的, 我们将经历 4 个步骤
边框一个接一个地出现
红/橙/白色方块向里滑入
方块向外划出
边框消失
我们只需要 animation-direction: alternate 来完成步骤 1 和 2, 步骤 3 和 步骤 4 我们可以使用 reverse, 另外, 我们可以使用 animation-iteration-count: infinite 重复动画
首先, 我们先书写好基本的 HTML 结构
<!doctype html>
<html>
<head>
<!-- <link rel="preload"> for CSS, JS, and font files -->
<style type="text/css">
/*
* All the CSS for the loader
* Minified and vendor prefixed
*/
</style>
</head>
<body>
<div class="loader">
<!-- HTML for the loader -->
</div>
<header />
<main />
<footer />
<!-- Tags for CSS and JS files -->
</body>
</html>
构建 logo 本身
