国庆节前端技术栈充实计划(3):仅使用CSS做一个漂亮的动画加载页面

利用伪元素、关键帧动画,你将具有强大的创造力,本文就是一个例子。本例中,利用两者,就可以构建一个加载动画,无需任何JS代码和图片。

你会问“为什么”

首先,这是一篇关于CSS、伪元素、关键帧动画以及利用这些工具可实现哪些效果的文章。我不认为每个Web App都需要一个加载/启动界面,也不准备在本文中说服你相信这个。

我最近的一个项目中,在它加载好可用之前,第一步要做的是加载一段视频和几张图片。我不想立即显示内容,因为用户可能很快就要向下滚动界面,(页面未加载完)而不能享受完整的体验。我确实想保证一切加载完后,他们可以停留的时间足够长。

这就是我为什么决定构建这样一个尽可能快速显示出来的动画加载界面,直到其余的所有内容都准备完毕。为了实现它,我们只使用了HTML和CSS,没有使用任何额外的技术。


如何构建它

你想要构建的加载界面因设计的不同,构建过程也会不一样。为了更具有普适性,我将以我的设计为例。

注意,本文假设你已熟悉伪元素、CSS animation属性及关键帧动画。如果你想复习一下后两者,推荐阅读另一篇文章。还有一篇文章,从中你可以全面了解伪元素。

好了,一切都准备好了吗?

现在开始

在决定仅用HTML和CSS构建它之前,我先做了一个动画版。

它可以给我们一个很好的参考。正如你看见的,这个动画包含4步。

  1. 四个边框依次出现。
  2. 红色、桔色、白色矩形滑入。
  3. 三个矩形滑出。
  4. 边框消失。

我们只需要构建第一步和第二步。使用 animation-direction:alternate; 可以实现动画的反向执行, 从而完成第3步和第4步的构建。使用 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>

CSS嵌入在头部( <head></head>)及body标签打开后加载出来的HTML中。可能还有更好的方法去利用浏览器的渲染路径?如果有,可以在评论中告诉我。

构建Logo本身

没有直接分析最终版本,我们试着遵循逻辑步骤,以便开发者可以用来构建相似的动画。在我的大脑里,第一步是构建没有任何动画效果的Logo。

div.logo 代表最外层矩形(父亲), div.{$color}代表里面的每一个矩形。

<div class="logo">
  <div class="white"></div>
  <div class="orange"></div>
  <div class="red"></div>
</div>

红色矩形在桔色矩形的后面,而桔色矩形在白色矩形的后面。因为默认情况下,元素按最后一个到第一个的顺序叠在一块。每个元素都针对某一边绝对定位,将来会从这一边出现(如,红色矩形从 left,桔色矩形从 bottom)。同时给它们适当的 heightwidth

用SCSS,我们写出下面的代码:

div.logo {
  width: 100px;
  height: 100px;
  border: 4px solid black;
  box-sizing: border-box;
  position: relative;
  background-color: white;
  & > div {
    position: absolute;
  }
  div.red {
    border-right: 4px solid black;
    top: 0;
    bottom: 0;
    left: 0;
    width: 27%;
    background-color: #EA5664;
  }
  /* Similar code for div.orange and div.white */
  div.orange{
    border-top: 4px solid black;
    bottom: 0;
    right: 0;
    width: 73%;
    height:50%;
    background-color: #0000ff;
  }

div.white{
    border-left: 4px solid black;
    top: 0;
    right: 0;
    width: 20%;
    height:50%;
    background-color: #fffff;
  }
}

这是运行结果:

[running code can not be loaded]

边框动画

跟着我呢吧?接下来开始有意思的部分。

CSS不允许按我们的想法直接动画操作 div.logo的边框。所以,我们必须从矩形上移除边框,寻求不同的方法创建它,一种可以动画操作的方法。

或许我们可以将边框打散成一个个小块,让它们循序地显现?我们可以使用两个透明的伪元素来覆盖整个矩形。

每次可以渲染出矩形四条边中的两条。然后我们通过让伪元素的 widthheight从0%至100%依次动画显示出来,从而让每个边框单独显示出来。

让我们试下吧。首先创建一个静态的版本。 div.logo::before绝对定位于 div.logo左顶角,将显示顶部边框和右边框。 div.logo::after定位于右底部,显示底部和左边框。

div.logo的SCSS看起来是这样的:

div.logo {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  position: relative;
  background-color: white;

  &::before,
  &::after {
    z-index: 1;
    box-sizing: border-box;
    content: '';
    position: absolute;
    border: 4px solid transparent;
    width: 100%;
    height: 100%;
  }

  &::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;
  }
}

结果是:

[running code can not be loaded]

接下来,让我们用第一个关键帧为 div.logo::before添加动画。

作为初始状态,该伪元素的 widthheight均设置为0。我们使用关键帧让 width“动起来”变成100%,接下来,让 height变成100%。

伴随着该转换,边框的颜色也在适当的时刻由透明变成黑色,这样顶部和右侧的边框就会按我们预期的方式动起来。

包含伪元素初始状态改变的代码,见下:

div.logo {
  &::before,
  &::after {
    /* ... */
    width: 0;
    height: 0;
    animation-timing-function: linear;
  }

&::before {
    /* ... */
    animation: border-before 1.5s infinite;
    animation-direction: alternate;
  }
}

@keyframes border-before {
  0% {
    width: 0;
    height: 0;
    border-top-color: black;
    border-right-color: transparent;
  }
  24.99% {
    border-right-color: transparent;
  }
  25% {
    height: 0;
    width: 100%;
    border-top-color: black;
    border-right-color: black;
  }
  50%,
  100% {
    width: 100%;
    height: 100%;
    border-top-color: black;
    border-right-color: black;
  }
}

针对 div.logo::after,我们采用同样的步骤,不要忘记修改时间,调换 widthheight。现在我们有了完整的边框动画。

[running code can not be loaded.]

制作矩形动画

终于,开始制作矩形动画了。

主要的挑战是关键帧间的关联。我们需要安排好每个动画,考虑好所有的步骤。这样,整个动画就会连续呈现。接着动画就可以反向执行。

针对边框的动画,我们简单地为每个边框分配25%的时间。这次我们把矩形添加进来。经过一系列的尝试和试错,我们选择在1.5s内按照以下策略加载各个部分:

  1. 0 to 25%: 顶部和右边的边框出现。
  2. 25 to 50%: 底部和左边的边框出现。
  3. 50 to 65%: 红色矩形出现。
  4. 65 to 80%: 桔色边框出现。
  5. 75 to 90%: 白色边框出现。

根据以上时间轴,我们现在写出以下关键帧,为红色矩形的不透明度和宽度增加动画效果。

div.logo {
  div.red {
    /* ... */
    width: 0;
    animation: red 1.5s infinite;
    animation-direction: alternate;
  }
}

@keyframes red {
  0%,
  50% {
    width: 0;
    opacity: 0;
  }
  50.01% {
    opacity: 1;
  }
  65%,
  100% {
    opacity: 1;
    width: 27%;
  }
}

我们为桔色、白色矩形重复同样的过程,最后获得我们想要的结果:

[running code can not be loaded.]


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-10-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏成猿之路

2019开发者调查趋势与方向报告出炉

近日国外开发者平台 HankerRank 发布了 2019 年开发者技能调查报告,该报告根据对71,281位开发者的调查得出。作者从中选取了一部分,给大家解读一...

14940
来自专栏KEN DO EVERTHING

快速入门Vue

刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

16910
来自专栏进击的全栈

认识Set和Map数据结构

tips : 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致,而entries方法返回的...

17570
来自专栏娱乐心理测试

mpvue网络接口请求封装

在mpvue中我们同样使用小程序的原生API wx.request进行请求,具体方法如下:

48730
来自专栏hotqin888的专栏

用beego vue.js element axios 写flow办公流程——系列五

自己的认识:一定要用独立的前端,即vue.js前端项目必须是独立的,独立的服务,不要放beego里的view里作为tpl页面。虽然,放beego view里的t...

16400
来自专栏码匠的流水账

聊聊flink的Execution Plan Visualization

本文主要研究一下flink的Execution Plan Visualization

15120
来自专栏编程微刊

js通过input框输入属性和值,改变div的属性

js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

67650
来自专栏Nicky's blog

editormd实现文章详情页面预览

继之前博客写了editmd.js(国内开源的一款前端Markdown框架)实现的写文章功能之后,本博客介绍使用editormd实现文章预览功能

22420
来自专栏前端vue

vue-cli3项目创建-配置-发布

(2) 修改user module -- src/store/module/user.js

4.3K40
来自专栏编程软文

分布式阿波罗Apollo配置中心

为什么要使用apollo,在我们开发分布式微服务项目的时候,那些配置一旦变更,就需要重启服务,这样非常不友好。因此我们考虑动态更改配置文件当中的配置,所以把那些...

29620

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励