如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/Yjomyd
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cydZrfr
源代码下载
本地下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 3 个子元素,每个子元素代表一个圆:
<div class="circles"><span></span><span></span><span></span>
</div>
居中显示:
body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black;
}
定义容器尺寸:
.circles {width: 60vmin;height: 60vmin;
}
画出容器中的1个圆:
.circles {position: relative;
}.circles span {position: absolute;box-sizing: border-box;width: 50%;height: 50%;background-color: white;border-radius: 50%;left: 25%;
}
定义变量,画出多个圆,每个圆围绕着第 1 个圆的底部中点旋转,围成一个更大的圆形:
.circles {--particles: 3;
}.circles span {transform-origin: bottom center;--deg: calc(360deg / var(--particles) * (var(--n) - 1));transform: rotate(var(--deg));
}.circles span:nth-child(1) {--n: 1;
}.circles span:nth-child(2) {--n: 2;
}.circles span:nth-child(3) {--n: 3;
}
为子元素增加动画效果:
.circles span {animation: rotating 5s ease-in-out infinite;
}@keyframes rotating {0% {transform: rotate(0);}50% {transform: rotate(var(--deg)) translateY(0);}100% {transform: rotate(var(--deg)) translateY(100%) scale(2);}
}
设置子元素混色模式,使子元素间交叠的部分显示成黑色:
.circles span {mix-blend-mode: difference;
}
为容器增加动画效果,抵销子元素放大,使动画流畅衔接:
.circles {animation: zoom 5s linear infinite;
}@keyframes zoom {to {transform: scale(0.5) translateY(-50%);}
}
接下来用 d3 批量处理 dom 元素和 css 变量。
引入 d3 库:
<script src="https://d3js.org/d3.v5.min.js"></script>
用 d3 为表示圆数量的变量赋值:
const COUNT_OF_PARTICLES = 30;
d3.select(’.circles’)
.style(’–particles’, COUNT_OF_PARTICLES)
<p>用 d3 生成 dom 元素:</p>
<pre class="brush:js">d3.select('.circles').style('--particles', COUNT_OF_PARTICLES).selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('span');
用 d3 为表示子元素下标的变量赋值:
d3.select('.circles').style('--particles', COUNT_OF_PARTICLES).selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('span').style('--n', (d) => d + 1); ```
删除掉 html 文件中的相关 dom 元素和 css 文件中相关的 css 变量。
最后,把圆的数量调整为 30 个:
const COUNT_OF_PARTICLES = 30; ```
大功告成!
原文地址:https://segmentfault.com/a/1190000016047889
如何用 CSS 和 D3 创作一个抽象的黑白交叠动画相关推荐
- 前端每日实战:108# 视频演示如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/Yjomyd 可交互视频 此视频是可 ...
- 如何用 CSS 和 D3 创作一个用文字组成的心形图案
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJvERW 可交互视频 ...
- 如何用 CSS 和 D3 创作火焰动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJdVxx 可交互视频 ...
- 如何用 CSS 和 D3 创作火焰动画 1
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJdVxx 可交互视频 ...
- 前端每日实战:88# 视频演示如何用 CSS 和 D3 创作火焰动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJdVxx 可交互视频 此视频是可 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 如何用css的background写一个带斜切角、有边框又有内外阴影的按钮呢?
先附上另一大佬的链接https://segmentfault.com/a/1190000038911131,本文在该基础上做些调整,并详细讲讲background的用法 从ui拿到的需求是这样的,这张 ...
- java旋转太极图_如何用CSS纯代码画一个旋转的太极图(附代码)
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由 若干个小圆组合而成,适合初学css3的人练练手,娱以 致 ...
- 太极图php代码,如何用CSS纯代码画一个旋转的太极图(附代码)
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由 若干个小圆组合而成,适合初学css3的人练练手,娱以 致 ...
最新文章
- FastJson 转换 javaBean 时 null 值被忽略都问题
- Chapter7-13_Dialogue State Tracking (as Question Answering)
- 没有bug队——加贝——Python 练习实例 31,32
- Linux管理文件和目录
- fedora10 linux内核,自己动手编译Linux2.6.25.10内核(Fedora 7)
- Bryntum Web JavaScript Components Crack
- EXCEL实现自动填充
- java基础集合框架——List、Set、Map概述(java集合一)
- 多用组合少用继承的设计模式JAVA_结合设计模式理解多用组合少用继承的原则(转)...
- Office 365中Word转成PDF
- 笔记本怎么编html,笔记本win7深度技术旗舰版使用记事本编辑和运行html代码的方法...
- EFR32获取Zigbee Light Link Key和NWK Key的三种方法
- 厦门商业贷款转公积金攻略
- 【JAVA面试题】java面试题100道详解
- 《机器学习:实用案例解析》第三章 (3)
- C# 调用C++dll(以基恩士LKG5000为例)
- C语言入门基础知识【完整版】
- 模块学习4:(1)通过MQTT协议和电信云平台的通信(内附MQTT协议V3.1.1的原版和中文参考资料)
- PHP_微信公众号开发(1)
- CentOS 5.3 安裝 SquirrelMail
热门文章
- MySQL-分库分表初探
- 监控服务器项目报备,智慧环保监控预警平台运维项目
- 福建2020年3月计算机二级报名时间,福建2020年3月计算机二级考试报名时间安排...
- 计算机应用办公软件实训报告,办公软件实习报告
- canopy算法 java_mahout源码canopy算法分析之二CanopyMapper
- springboot打包不同环境配置与shell脚本部署
- GitHub下载某分支的代码
- 怎么做才能让浏览器看不到token_卫生间回填及防水怎么做才能后患无忧
- MATLAB-M文件
- 2021-05-20 Matlab实现傅里叶变换