效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/pOZKWJ

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cVB48Ur

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 1 个 span 元素:

<div class="loader">
<span></span>
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

定义容器尺寸:

.loader {
width: 40em;
height: 1em;
font-size: 10px;
}

设置容器中 span 的样式,是一个彩色细长条:

.loader {
position: relative;
} .loader span {
position: absolute;
width: inherit;
height: inherit;
background-color: hsl(24, 100%, 65%);
}

引入 d3.js:

<script src="https://d3js.org/d3.v5.min.js"></script>

删除掉 dom 中的 span 元素,改用 d3 创建,其中常量 COUNT 是细长条的数量,因为 d3.range() 生成的数据是从 0 开始的数列,所以把数据修正为以日常习惯的从 1 开始的数列:

const COUNT = 1;

d3.select('.loader')
.selectAll('span')
.data(d3.range(COUNT).map(d => d + 1))
.enter()
.append('span')

删除掉 css 中设置 span 元素 background-color 属性的代码,改用 d3 设置:

d3.select('.loader')
.selectAll('span')
.data(d3.range(COUNT).map(d => d + 1))
.enter()
.append('span')
.style('background-color', `hsl(24, 100%, 65%)`)

把细长条的数量改为 2 个,颜色改为动态生成:

const HUE_DEG = 12;
const COUNT = 2; d3.select('.loader')
/* ...略 */
.style('background-color', (d) => `hsl(${d * HUE_DEG}, 100%, 65%)`)

再进一步,把颜色改为彩色条和黑色条间隔出现,请注意虽然在表达式中 hue 的值是按 12 递增,但实际看到的的效果是彩色长条间的 hue 相差 24,因为其中夹杂着黑色长条:

d3.select('.loader')
/* ...略 */
.style('background-color', (d) => d % 2 !== 0
? `hsl(${d * HUE_DEG}, 100%, 65%)`
: 'black');

此时,动态生成的 dom 结构为:

<div class="container">
<span style="background-color: rgb(255, 77, 77);"></span>
<span style="background-color: black;">
</div>

引入 gsap 库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

增加长条由中心向两侧伸展的动画效果:

let animation = new TimelineMax({repeat: -1});
animation.staggerFrom('.loader span', 0.5, {scaleX: 0}, 0.4)

最后,把长条的数量改为 30 个,它是用整圈色相环的 360 度除以 hue 间隔得到的:

const COUNT = 360 / HUE_DEG;

大功告成!

前端每日实战:136# 视频演示如何用 D3 和 GSAP 创作一个横条 loader的更多相关文章

  1. 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...

  2. 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...

  3. 前端每日实战:133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eLMKJG 可交互视频 此视频是可 ...

  4. 前端每日实战:116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...

  5. 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...

  6. 前端每日实战:69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 此视频是可 ...

  7. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...

  8. 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...

  9. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

随机推荐

  1. centos7 系統vps安裝mysql5.6及設置本地遠程連接筆記

    用xshell連接上vps 1,下载mysql的repo源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm su ...

  2. 【HANA系列】SAP HANA的ini文件存储路径

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA的ini文件存储 ...

  3. 【HANA系列】SAP HANA跟我学HANA系列之创建属性视图一

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA跟我学HANA系 ...

  4. go的变量定义

    package main //理解包的概念 import "fmt" var ( aa = 1 bb = "kkk" ss = true) func varia ...

  5. ElasticSearch Kibana 创建索引,删除索引,查看索引配置

    1.输入命令,点击绿色的三角形箭头. PUT chuyuan  //创建索引 GET chuyuan/_settings  //查看chuyuan索引下的配置 GET _all/_settings   ...

  6. 创建可执行bin安装文件

    [应用场景] 简化操作,对于有些安装操作而言,需要包含安装脚本和脚本需要的文件两部分,封装成可执行bin文件之后就只有一个安装包了. 代码保护,在很多情况下,我们并不希望用户可以直接接触到代码部分,这 ...

  7. Http服务器搭建(CentOS 7)

    注意ip地址为: 虚拟机ip设置 TYPE="Ethernet"BOOTPROTO="static"NAME="enp0s3"DEVICE= ...

  8. Matcher和Pattern总结

    Matcher.Pattern简介 java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包.它包括两个类:Pattern和Matcher Pattern 一个Pat ...

  9. 洛谷 P2647 最大收益 题解

    题面 对于“n个物品选任意个”我们就可以想到一种递推方法,即设f[i][j]表示前i个物品选j个的最大收益 我们发现正着转移并不好转移,我们可以倒着转移,使选择的当前第i号物品为第一个物品,这样的话我 ...

  10. C语言 --- 函数指针(初级)

    1.函数指针:指向函数的指针变量.                 函数在内存中也是有地址的,函数名代表函数的内存地址.    例子:函数:int sum(int a,int b);      int ...