摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。最后,把摆线的数量调整为个。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/vavZPx
可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/c3q6LH7
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,容器中包含 3 个元素,代表 3 条摆线:
</>复制代码
居中显示:
</>复制代码
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(lightyellow, burlywood);
}
定义容器的尺寸,并画出固定摆线示意墙:
</>复制代码
.pendulums {
width: 40em;
height: 30em;
font-size: 10px;
border-top: 0.3em solid cadetblue;
}
画出一条摆线:
</>复制代码
.pendulums {
position: relative;
}
.pendulums span {
position: absolute;
width: 0.2em;
height: 15em;
background-color: cadetblue;
left: 50%;
}
用伪元素画出摆线底部悬挂的小球:
</>复制代码
.pendulums span::before {
content: "";
position: absolute;
width: 1.5em;
height: 1.5em;
background: steelblue;
border-radius: 50%;
top: 100%;
left: -0.75em;
}
用径向渐变为小球增加光影:
</>复制代码
.pendulums span::before {
background: radial-gradient(
circle at 70% 35%,
white,
darkturquoise 30%,
steelblue 50%
);
}
用伪元素画出小球的阴影:
</>复制代码
.pendulums span::after {
content: "";
position: absolute;
width: 2em;
height: 0.3em;
background-color: rgba(0, 0, 0, 0.2);
top: 120%;
left: -1em;
filter: blur(0.4em);
}
以摆线的顶点为原点,将摆线向左旋转:
</>复制代码
.pendulums span {
transform-origin: 50% top;
transform: rotate(25deg);
}
让摆线摆动起来:
</>复制代码
.pendulums span {
animation: swing ease-in-out infinite;
animation-duration: 1.5s;
}
@keyframes swing {
50% {
transform: rotate(-25deg);
}
}
为每条摆线定义下标变量:
</>复制代码
.pendulums span:nth-child(1) {
--n: 1;
}
.pendulums span:nth-child(2) {
--n: 2;
}
.pendulums span:nth-child(3) {
--n: 3;
}
用变量设置摆线的长度,和动画的时长,都是逐渐增大的等差数列:
</>复制代码
.pendulums span {
height: calc((var(--n) - 1) * 1em + 15em);
animation-duration: calc((var(--n) - 1) * 0.02s + 1.5s);
}
接下来用 d3 来批量处理 dom 元素和 css 变量:
引入 d3 库:
</>复制代码
用 d3 创建摆线的 dom 元素:
</>复制代码
const COUNT = 3;
d3.select(".pendulums")
.selectAll("span")
.data(d3.range(COUNT))
.enter()
.append("span")
用 d3 定义摆线的下标变量:
</>复制代码
d3.select(".pendulums")
.selectAll("span")
.data(d3.range(COUNT))
.enter()
.append("span")
.style("--n", (d) => d + 1);
删除掉 html 文件中相关的 dom 定义和 css 文件中的变量定义。
最后,把摆线的数量调整为 15 个。
</>复制代码
const COUNT = 15;
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113697.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。最后,把摆线的数量调整为个。 showImg(https://segmentfault.com/img/bVbe6re?w=400&h=301); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://code...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(...
阅读 678·2021-09-30 09:47
阅读 2872·2021-09-04 16:40
阅读 856·2019-08-30 13:18
阅读 3450·2019-08-29 16:22
阅读 1554·2019-08-29 12:36
阅读 585·2019-08-29 11:11
阅读 1477·2019-08-26 13:47
阅读 1132·2019-08-26 13:32
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要