技术文库

首页 >> WEB前端开发工程师 >>

如何只用 CSS 完成漂亮的加载

广告图1

最新开课信息

Java+Android+云计算 Java+Android+云计算
2018年3月28日
讲师:叶老师
国际软件测试工程师 国际软件测试工程师
2018年3月29日
讲师:胡老师
国际嵌入式开发工程师 国际嵌入式开发工程师
2018年3月28日
讲师:皇甫老师
Android移动开发工程师 Android移动开发工程师
2018年3月28日
讲师:孙老师
Web前端开发工程师 Web前端开发工程师
2018年3月29日
讲师:管老师
Java高级软件开发工程师 Java高级软件开发工程师
2018年03月30日
讲师:叶老师
广告图2

最新新闻动态

365体育彩票是真的吗

如何只用 CSS 完成漂亮的加载

bVSJ0b

为什么要做加载

只想说, 本文最重要的是对?CSS,?伪元素,?keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载

我是如何做的

不同的页面, 对加载的设计也就可能不同. 本文设计的加载适合大多数页面.

并且, 本文假设读者已经非常熟悉伪元素,?CSS 动画属性keyframe, 如果读者想重温, 下面两篇文章可做参考

开始入门

在开始一起构建它前, 我们先看看它最后的效果

正如你所看到的, 我们将经历?4 个步骤

  • 边框一个接一个地出现
  • 红/橙/白色方块向里滑入
  • 方块向外划出
  • 边框消失

我们只需要?animation-direction: alternate?来完成步骤 1 和 2, 步骤 3 和 步骤 4 我们可以使用?reverse, 另外, 我们可以使用?animation-iteration-count: infinite?重复动画

首先, 我们先书写好基本的?HTML?结构

构建 logo 本身

bVSJ0f

一开始我们先实现?logo?本身, 而不是最终版本的效果

父级元素?logo, 不同颜色的方块都是它的子元素

我们用?less?来实现

logo?的效果图如下

bVSJ0q

边框动画

接下来, 我们将进入棘手(有趣)的部分

CSS 不允许我们直接对?div.logo?的边框进行设置达到我们想要的效果, 所以我们必须去除原有的边框, 采用其他的办法来实现

我们要把四个边框分割开来, 然后让它们有序地出现, 所以, 我们可以使用覆盖整个?div?的两个透明的伪元素

废话少说, 就让我们开始吧, 我们先做出它最初始的样子. 我们让?div.logo :: before?绝对位于?div.logo?的左上角,代表方块的上边框和右边框
, 让?div.logo::after?绝对定位?div.logo?的右下角, 代表方块的下边框和左边框

现在, less 代码变成了这样

现在效果长这样

bVSJ0p

接下来, 我们就用?keyframe?做?div.logo::before?的第一个动画

我们将?width?和?height?初始都为?0, 然后用?keyframe?将?width?和
height?调整到?100%

随着我们在相应的时间把边框从透明变为黑色, 我们想要的最开始的效果就出来了

该代码展示了伪元素的初始动画

我们对?div.logo::after?重复相同的操作, 不要忘了调整时间和反转?width?和?height. 现在, 我们就有了最外层边框的整个动画.

方块动画

最后,我们一起来设置方块的动画

我们最大的挑战是无法连接?keyframes。因为,我们最终想要的动画中每个小方框都有一定的顺序, 为此, 我们作如下改变

  • 0 to 25%:上边框和右边框显现
  • 25 to 50%:下边框和左边框显现
  • 50 to 65%:红色小方块显现
  • 65 to 80%:橙色小方块显现
  • 75 to 90%:白色小方块显现

红色小方框?keyframe?如下

重复上面的代码,就可完成我们整个动画, 是不是很完美

总结

感谢你的阅读,最后附上?所有的源码,但个人建议,不要直接阅读源码,根据上面的提示在codepen?中自己来一遍才是最佳实践

客服中心
展开客服