资讯专栏INFORMATION COLUMN

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

tabalt / 3448人阅读

摘要:接下来用批量增加的元素。引入库声明一个常量,表示网格的边长删除掉文件中的子元素,改为用动态创建继续用连缀语法增加子元素删除掉文件中的变量声明,改为用动态声明略最后,把边长改为,即让个一起动画大功告成

效果预览

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

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

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom,容器中包含 1 个 .square 子容器,子容器中包含 4 个 ,每个 代表一个对角扇形:

</>复制代码

居中显示:

</>复制代码

  1. body {
  2. margin: 0;
  3. height: 100vh;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. background-color: #222;
  8. }

设置容器的尺寸单位,1em 等于 8px

</>复制代码

  1. .container {
  2. font-size: 8px;
  3. }

子容器中的 4 个 不设宽高,只设边框,其中第 1 个和第 4 个 只取左右边框,第 2 个和第 3 个 只取上下边框:

</>复制代码

  1. .square span {
  2. display: block;
  3. border: 2.5em solid transparent;
  4. color: #ffffd;
  5. }
  6. .square span:nth-child(1),
  7. .square span:nth-child(4) {
  8. border-left-color: currentColor;
  9. border-right-color: currentColor;
  10. }
  11. .square span:nth-child(2),
  12. .square span:nth-child(3) {
  13. border-top-color: currentColor;
  14. border-bottom-color: currentColor;
  15. }

把边框改为圆弧:

</>复制代码

  1. .square span {
  2. border-radius: 50%;
  3. }

在子容器中用 grid 布局把 4 个 设置为 2 * 2 的网格:

</>复制代码

  1. .square {
  2. display: grid;
  3. grid-template-columns: repeat(2, 1fr);
  4. grid-gap: 0.2em;
  5. padding: 0.1em;
  6. }

旋转 4 个 ,使它们围合成一个正方形,看起来像一个花朵,算式的结果是 45 度,写成这样是为了和接下来的动画的算式的形式保持一致:

</>复制代码

  1. .square span {
  2. transform: rotate(calc(45deg + 90deg * 0));
  3. }

增加让 旋转的动画,整个动画过程旋转 4 次,每次旋转 90 度,4 次旋转之后即返回原位:

</>复制代码

  1. .square span {
  2. animation: rotation 2s ease-in-out infinite;
  3. }
  4. @keyframes rotation {
  5. 0% { transform: rotate(calc(45deg + 90deg * 0)); }
  6. 25% { transform: rotate(calc(45deg + 90deg * 1)); }
  7. 50% { transform: rotate(calc(45deg + 90deg * 2)); }
  8. 75% { transform: rotate(calc(45deg + 90deg * 3)); }
  9. 100% { transform: rotate(calc(45deg + 90deg * 4)); }
  10. }

使其中 2 个 朝相反的方向运动:

</>复制代码

  1. .square span:nth-child(2),
  2. .square span:nth-child(3) {
  3. animation-direction: reverse;
  4. }

至此,一个 .square 子容器的动画已经完成,接下来制作 4 个 .square 的动画。
在 dom 中再增加 3 组 .square 子容器:

</>复制代码

用 grid 布局把 4 个 .square 布局成网格状,变量 --columns 是网格的边长,即每边有 2 个 .square 子容器:

</>复制代码

  1. .container {
  2. display: grid;
  3. --columns: 2;
  4. grid-template-columns: repeat(var(--columns), 1fr);
  5. }

现在看起来好像是有几个黑色的小方块在不停地移动,当 dom 元素越多时,动画效果看起来就越壮观,就像集体舞一样,人越多越有气势。接下来用 d3 批量增加 dom 的元素。
引入 d3 库:

</>复制代码

声明一个 COLUMNS 常量,表示网格的边长:

</>复制代码

  1. const COLUMNS = 2;

删除掉 html 文件中的 .square 子元素,改为用 d3 动态创建:

</>复制代码

  1. d3.select(".container")
  2. .selectAll("div")
  3. .data(d3.range(COLUMNS * COLUMNS))
  4. .enter()
  5. .append("div")
  6. .attr("class", "square");

继续用连缀语法增加 子元素:

</>复制代码

  1. d3.select(".container")
  2. .selectAll("div")
  3. .data(d3.range(COLUMNS * COLUMNS))
  4. .enter()
  5. .append("div")
  6. .attr("class", "square")
  7. .selectAll("span")
  8. .data(d3.range(4))
  9. .enter()
  10. .append("span");

删除掉 css 文件中的 --columns 变量声明,改为用 d3 动态声明:

</>复制代码

  1. d3.select(".container")
  2. .style("--columns", COLUMNS)
  3. /*略*/

最后,把边长改为 4,即让 16 个 .square 一起动画:

</>复制代码

  1. const COLUMNS = 4;

大功告成!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98119.html

相关文章

  • 前端每日实战150# 视频演示何用 CSS D3 创作一个体舞动画

    摘要:接下来用批量增加的元素。引入库声明一个常量,表示网格的边长删除掉文件中的子元素,改为用动态创建继续用连缀语法增加子元素删除掉文件中的变量声明,改为用动态声明略最后,把边长改为,即让个一起动画大功告成 showImg(https://segmentfault.com/img/bVbhJZg?w=400&h=301); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预...

    AlphaWatch 评论0 收藏0
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读, 过往项目 2018 年 9 月份项目汇总(共 26 个项目) 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(...

    muddyway 评论0 收藏0
  • 前端每日实战 2018 年 9 月份项目汇总(共 26 个项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(...

    lavnFan 评论0 收藏0

发表评论

0条评论

tabalt

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<