效果预览

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

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

可交互视频教程

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

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

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

源代码下载

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

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

代码解读

定义 dom,一个容器中包含 9 个子元素:

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

居中显示:

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

定义容器和子元素尺寸,是一个大正方形里包含 9 个小正方形:

.loader {
width: 10em;
height: 10em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em;
}

把图案调整为大菱形中包含 9 个小菱形:

.loader {
transform: rotate(45deg);
}

以竖向的小菱形为单位,为小菱形块上色:

.loader span {
background-color: var(--c);
} .loader span:nth-child(7) {
--c: tomato;
} .loader span:nth-child(4),
.loader span:nth-child(8) {
--c: gold;
} .loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
--c: limegreen;
} .loader span:nth-child(2),
.loader span:nth-child(6) {
--c: dodgerblue;
} .loader span:nth-child(3) {
--c: mediumpurple;
}

定义动画效果:

.loader span {
animation: blinking 2s linear infinite;
animation-delay: var(--d);
transform: scale(0);
} @keyframes blinking {
0%, 100% {
transform: scale(0);
} 40%, 80% {
transform: scale(1);
}
}

最后,为小菱形设置时延,增强动感:

.loader span:nth-child(7) {
--d: 0s;
} .loader span:nth-child(4),
.loader span:nth-child(8) {
--d: 0.2s;
} .loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
--d: 0.4s;
} .loader span:nth-child(2),
.loader span:nth-child(6) {
--d: 0.6s;
} .loader span:nth-child(3) {
--d: 0.8s;
}

大功告成!

前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画的更多相关文章

  1. 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画

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

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

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

  3. 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader

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

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

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

  5. 前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画

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

  6. 前端每日实战:65# 视频演示如何用纯 CSS 创作一个摇摇晃晃的 loader

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

  7. 前端每日实战:81# 视频演示如何用纯 CSS 创作一个变色旋转动画

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

  8. 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

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

  9. 如何用纯 CSS 创作一个菱形 loader 动画

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

随机推荐

  1. zk的KeeperErrorCode = ConnectionLoss错误

    额,这东西都快把人搞崩溃了,各种排查各种正常. 最后竟然是因为我在客户端未连接上zkserver的时候就进行了create操作造成的错误. 噗, Exception in thread "m ...

  2. Hypermesh中弹簧单元设置

    1D >> springs 单元类型 CBUSH1D 单元属性 PBUSH1D

  3. 织梦dedecms发布视频文章前台变成一张图片的解决方法

    在发布文章的时候,有时需要插入视频的代码,如优酷.腾讯等视频,这样更能让文章变的丰富,但是在发布视频的时候,前台并不能播放视频,而是一张图片 解决这个方法其实很简单,在发布视频文章的时候,将附加选项的 ...

  4. mycat 配置简介

    最近在看 mycat ,官网: http://www.mycat.io/  上面就有 PDF 的教程下载.但是对于我这个初学者来讲,搭建环境的时候还是有点晕,下面从一个简单的例子来讲解相关配置.我用的 ...

  5. tcpdump中文帮助

    TCPDUMP(8)                                            System Manager's Manual                        ...

  6. Week 12 - 673.Number of Longest Increasing Subsequence

    Week 12 - 673.Number of Longest Increasing Subsequence Given an unsorted array of integers, find the ...

  7. c# 动态加载tlb为程序集

    private enum RegKind { RegKind_Default = , RegKind_Register = , RegKind_None = } [DllImport("ol ...

  8. 转 linux查看文件前几行和后几行的命令

    可以使用head(查看前几行).tail(查看末尾几行)两个命令.例如:查看/etc/profile的前10行内容,应该是:# head -n 10 /etc/profile查看/etc/profil ...

  9. 自动化测试中,元素无法点击定位等问题的解决:js的使用方法

    在自动化测试中经常会遇到使用selenium方法定位元素点击操作失败的情况,例如,我们想实现在浏览器输入http://www.baidu.com,进入百度首页后,鼠标悬停在“更多产品”上,点击“全部产 ...

  10. vue 路由嵌套 及 router-view vue-router --》children

    vue 路由嵌套 vue-router -->children   在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...