-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-06-15
来源 ：
阅读 1651
评论 0
摘要：本篇教程讲解了如何只用 CSS 完成漂亮的加载，希望阅读本篇文章以后大家有所收获，帮助大家对HTML+CSS的理解更加深入。
开始入门
在开始一起构建它前, 我们先看看它最后的效果
正如你所看到的, 我们将经历 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 本身
一开始我们先实现 logo 本身, 而不是最终版本的效果
父级元素 logo, 不同颜色的方块都是它的子元素
<div class="logo"> <div class="white"></div> <div class="orange"></div> <div class="red"></div> </div>
我们用 less 来实现
.logo {
position: relative;
width: 100px;
height: 100px;
border: 4px solid black;
box-sizing: border-box;
background-color: white;
& > div {
position: absolute;
}
.red {
top: 0;
bottom: 0;
left: 0;
width: 27%;
border-right: 4px solid black;
background-color: #EA5664;
}
/* Similar code for div.orange and div.white */
}logo 的效果图如下
边框动画
接下来, 我们将进入棘手(有趣)的部分
CSS 不允许我们直接对 div.logo 的边框进行设置达到我们想要的效果, 所以我们必须去除原有的边框, 采用其他的办法来实现
我们要把四个边框分割开来, 然后让它们有序地出现, 所以, 我们可以使用覆盖整个 div 的两个透明的伪元素
废话少说, 就让我们开始吧, 我们先做出它最初始的样子. 我们让 div.logo :: before 绝对位于 div.logo 的左上角，代表方块的上边框和右边框
, 让 div.logo::after 绝对定位 div.logo 的右下角, 代表方块的下边框和左边框
现在, less 代码变成了这样
.logo {
position: relative;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: white;
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 4px solid transparent;
}
&::before {
top: 0;
left: 0;
border-top-color: black;
border-right-color: black;
}
&::after {
bottom: 0;
right: 0;
border-bottom-color: red; // Red for demo purposes only
border-left-color: red;
}
}
现在效果长这样
接下来, 我们就用 keyframe 做 div.logo::before 的第一个动画
我们将 width 和 height 初始都为 0, 然后用 keyframe 将 width 和
height 调整到 100%
随着我们在相应的时间把边框从透明变为黑色, 我们想要的最开始的效果就出来了
该代码展示了伪元素的初始动画
div.logo {
&::before,
&::after {
/* ... */
animation-timing-function: linear;
}
&::before {
/* ... */
animation: border-before 1.5s infinite;
animation-direction: alternate;
}
}
@keyframes border-before {
0% {
width: 0;
height: 0;
border-right-color: transparent;
}
24.99% {
border-right-color: transparent;
}
25% {
height: 0;
width: 100%;
border-right-color: black;
}
50%,
100% {
width: 100%;
height: 100%;
}
}
我们对 div.logo::after 重复相同的操作, 不要忘了调整时间和反转 width 和 height. 现在, 我们就有了最外层边框的整个动画.
方块动画
最后，我们一起来设置方块的动画
我们最大的挑战是无法连接 keyframes。因为，我们最终想要的动画中每个小方框都有一定的顺序， 为此， 我们作如下改变
· 0 to 25%：上边框和右边框显现
· 25 to 50%：下边框和左边框显现
· 50 to 65%：红色小方块显现
· 65 to 80%：橙色小方块显现
· 75 to 90%：白色小方块显现
红色小方框 keyframe 如下
@keyframes red {
0%,
50% {
width: 0;
opacity: 0;
}
50.01% {
opacity: 1;
}
65%,
100% {
width: 27%;
opacity: 1;
}
}
重复上面的代码，就可完成我们整个动画， 是不是很完美
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
