摘要:可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器中包含个子元素居中显示定义均衡器的样式定义均衡器竖条的动画效果最后,设置各竖条依次动画大功告成
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/oybWBy
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cG64puy
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,容器中包含 5 个子元素:
</>复制代码
居中显示:
</>复制代码
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定义均衡器的样式:
</>复制代码
.equalizer {
width: 10em;
height: 10em;
display: flex;
justify-content: space-between;
}
.equalizer span {
width: 1.5em;
background: linear-gradient(0deg, green, yellow, red);
}
定义均衡器竖条的动画效果:
</>复制代码
.equalizer span {
animation: up-and-down 2s linear infinite;
}
@keyframes up-and-down{
0%, 100% {
clip-path: inset(27% 0 0 0);
}
10% {
clip-path: inset(17% 0 0 0);
}
20% {
clip-path: inset(55% 0 0 0);
}
30% {
clip-path: inset(30% 0 0 0);
}
40% {
clip-path: inset(13% 0 0 0);
}
50% {
clip-path: inset(38% 0 0 0);
}
60% {
clip-path: inset(80% 0 0 0);
}
70% {
clip-path: inset(21% 0 0 0);
}
80% {
clip-path: inset(0% 0 0 0);
}
90% {
clip-path: inset(36% 0 0 0);
}
}
最后,设置各竖条依次动画:
</>复制代码
.equalizer span {
animation: up-and-down 2s linear infinite calc(-1 * 0.4s * (var(--n) - 1));
}
.equalizer span:nth-child(1) {
--n: 1;
}
.equalizer span:nth-child(2) {
--n: 2;
}
.equalizer span:nth-child(3) {
--n: 3;
}
.equalizer span:nth-child(4) {
--n: 4;
}
.equalizer span:nth-child(5) {
--n: 5;
}
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113414.html
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
摘要:可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器中包含个子元素居中显示定义均衡器的样式定义均衡器竖条的动画效果最后,设置各竖条依次动画大功告成 showImg(https://segmentfault.com/img/bVbfmKG?w=400&h=304); 效果预览 按下右侧的点击预览按钮可以在...
阅读 2536·2021-11-15 11:36
阅读 1288·2019-08-30 15:56
阅读 2399·2019-08-30 15:53
阅读 1116·2019-08-30 15:44
阅读 727·2019-08-30 14:13
阅读 1066·2019-08-30 10:58
阅读 555·2019-08-29 15:35
阅读 1378·2019-08-29 13:58