为什么要做加载
只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载
我是如何做的
不同的页面, 对加载的设计也就可能不同. 本文设计的加载适合大多数页面.
并且, 本文假设读者已经非常熟悉伪元素, CSS 动画属性和keyframe.
开始入门
在开始一起构建它前, 我们先看看它最后的效果
正如你所看到的, 我们将经历 4 个步骤
- 边框一个接一个地
出现 - 红/橙/白色方块向里
滑入 - 方块向外
划出 - 边框
消失
我们只需要 animation-direction: alternate 来完成步骤 1 和 2, 步骤 3 和 步骤 4 我们可以使用 reverse, 另外, 我们可以使用 animation-iteration-count: infinite 重复动画
首先, 我们先书写好基本的 HTML 结构
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span class="hljs-meta"><!doctype html></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-comment"><!-- <link rel="preload"> for CSS, JS, and font files --></span> <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>></span><span class="css"> <span class="hljs-comment">/* * All the CSS for the loader * Minified and vendor prefixed */</span> </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loader"</span>></span> <span class="hljs-comment"><!-- HTML for the loader --></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">header</span> /></span> <span class="hljs-tag"><<span class="hljs-name">main</span> /></span> <span class="hljs-tag"><<span class="hljs-name">footer</span> /></span> <span class="hljs-comment"><!-- Tags for CSS and JS files --></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> |
构建 logo 本身
一开始我们先实现
logo 本身, 而不是最终版本的效果父级元素 logo, 不同颜色的方块都是它的子元素
|
1 2 3 4 5 6 |
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"logo"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"white"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orange"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"red"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> |
我们用 less 来实现
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<span class="hljs-selector-class">.logo</span> { <span class="hljs-attribute">position</span>: relative; <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">4px</span> solid black; <span class="hljs-attribute">box-sizing</span>: border-box; <span class="hljs-attribute">background-color</span>: white; & > div { <span class="hljs-attribute">position</span>: absolute; } <span class="hljs-selector-class">.red</span> { <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">27%</span>; <span class="hljs-attribute">border-right</span>: <span class="hljs-number">4px</span> solid black; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#EA5664</span>; } <span class="hljs-comment">/* Similar code for div.orange and div.white */</span> } |
logo 的效果图如下
边框动画
接下来, 我们将进入棘手(有趣)的部分
CSS 不允许我们直接对 div.logo 的边框进行设置达到我们想要的效果, 所以我们必须去除原有的边框, 采用其他的办法来实现
我们要把四个边框分割开来, 然后让它们有序地出现, 所以, 我们可以使用覆盖整个 div 的两个透明的伪元素
废话少说, 就让我们开始吧, 我们先做出它最初始的样子. 我们让 div.logo :: before 绝对位于 div.logo 的左上角，代表方块的上边框和右边框
, 让 div.logo::after 绝对定位 div.logo 的右下角, 代表方块的下边框和左边框
现在, less 代码变成了这样
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<span class="hljs-selector-class">.logo</span> { <span class="hljs-attribute">position</span>: relative; <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>; <span class="hljs-attribute">box-sizing</span>: border-box; <span class="hljs-attribute">background-color</span>: white; &::before, &::after { <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>; <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">box-sizing</span>: border-box; <span class="hljs-attribute">border</span>: <span class="hljs-number">4px</span> solid transparent; } &<span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">border-top-color</span>: black; <span class="hljs-attribute">border-right-color</span>: black; } &<span class="hljs-selector-pseudo">::after</span> { <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">border-bottom-color</span>: red; // Red for demo purposes only <span class="hljs-attribute">border-left-color</span>: red; } } |
现在效果长这样
接下来, 我们就用 keyframe 做 div.logo::before 的第一个动画
我们将 width 和 height 初始都为 0, 然后用 keyframe 将 width 和
height 调整到 100%
随着我们在相应的时间把边框从透明变为黑色, 我们想要的最开始的效果就出来了
该代码展示了伪元素的初始动画
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<span class="hljs-selector-tag">div</span><span class="hljs-selector-class">.logo</span> { &::before, &::after { <span class="hljs-comment">/* ... */</span> <span class="hljs-attribute">animation-timing-function</span>: linear; } &<span class="hljs-selector-pseudo">::before</span> { <span class="hljs-comment">/* ... */</span> <span class="hljs-attribute">animation</span>: border-before <span class="hljs-number">1.5s</span> infinite; <span class="hljs-attribute">animation-direction</span>: alternate; } } @<span class="hljs-keyword">keyframes</span> border-before { 0% { <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">border-right-color</span>: transparent; } 24<span class="hljs-selector-class">.99</span>% { <span class="hljs-attribute">border-right-color</span>: transparent; } 25% { <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">border-right-color</span>: black; } 50%, 100% { <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>; } } |
我们对 div.logo::after 重复相同的操作, 不要忘了调整时间和反转 width 和 height. 现在, 我们就有了最外层边框的整个动画.
方块动画
最后，我们一起来设置方块的动画
我们最大的挑战是无法连接 keyframes。因为，我们最终想要的动画中每个小方框都有一定的顺序， 为此， 我们作如下改变
0 to 25%：上边框和右边框显现25 to 50%：下边框和左边框显现50 to 65%：红色小方块显现65 to 80%：橙色小方块显现75 to 90%：白色小方块显现
红色小方框 keyframe 如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@<span class="hljs-keyword">keyframes</span> red { 0%, 50% { <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>; } 50<span class="hljs-selector-class">.01</span>% { <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>; } 65%, 100% { <span class="hljs-attribute">width</span>: <span class="hljs-number">27%</span>; <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>; } } |
重复上面的代码，就可完成我们整个动画， 是不是很完美.
本文由 @张弦先生 原创发布。如若转载，请注明出处：《如何只用CSS实现漂亮的loading效果》
支付宝扫一扫
微信扫一扫
大神！受我一拜！