为什么要做加载
只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载
我是如何做的
不同的页面...并且, 本文假设读者已经非常熟悉伪元素, CSS 动画属性和keyframe, 如果读者想重温, 下面两篇文章可做参考
1、学会使用 CSS 中的 :after 和 :before
2、keyframe...动画直通车
开始入门
在开始一起构建它前, 我们先看看它最后的效果
正如你所看到的, 我们将经历 4 个步骤
1、边框一个接一个地出现
2、红/橙/白色方块向里滑入
3、方块向外划出
4、边框消失
我们只需要...-- Tags for CSS and JS files -->
构建 logo 本身
一开始我们先实现 logo 本身, 而不是最终版本的效果
父级元素 logo...边框动画
接下来, 我们将进入棘手(有趣)的部分
CSS 不允许我们直接对 div.logo 的边框进行设置达到我们想要的效果, 所以我们必须去除原有的边框, 采用其他的办法来实现
我们要把四个边框分割开来