效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/YvBvBr

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom,只有 1 个元素:

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

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(darkgreen 30%, forestgreen);
}

定义容器尺寸:

.loader {
width: 10em;
height: 10em;
font-size: 20px;
}

用 box-shadow 画出 2 组点阵:

.loader::before,
.loader::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
background-color: currentColor;
box-shadow:
0 0, 2em 0, 4em 0, 6em 0,
0 2em, 2em 2em, 4em 2em, 6em 2em,
0 4em, 2em 4em, 4em 4em, 6em 4em,
0 6em, 2em 6em, 4em 6em, 6em 6em;
border-radius: 50%;
} .loader::before {
color: gold;
} .loader::after {
color: dodgerblue;
}

定义动画:

@keyframes round {
0% {
transform: translateX(0) translateY(0);
} 25% {
transform: translateX(3em) translateY(0);
} 50% {
transform: translateX(3em) translateY(3em);
} 75% {
transform: translateX(0) translateY(3em);
}
}

最后,把动画效果应用到点阵上:

.loader::before,
.loader::after {
animation: round 2s ease infinite;
} .loader::after {
animation-delay: -1s;
}

大功告成!

前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader的更多相关文章

  1. 如何用纯 CSS 创作单元素点阵 loader

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

  2. 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

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

  3. 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

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

  4. 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

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

  5. 63(原67).纯 CSS 创作单元素点阵 loader

    原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...

  6. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

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

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

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

  8. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

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

  9. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

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

随机推荐

  1. 流氓软件修改IE主页的解决方法

    运行regedit HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main 修改以下url Default_Page_URL Firs ...

  2. [CSP-S模拟测试]:X国的军队(贪心)

    题目描述 $X$国和$Y$国开战了! 作为$X$国的军事参谋,你了解到事态的严峻性.为了更好地应付敌人,你收集到了$Y$国城市中$n$个据点的信息,你打算攻破这$n$个据点! 每个据点$i$的信息由火 ...

  3. SqlServer 查看缓存 并合理设置最大内存

    SqlServer 服务器运行一段时间发现内存逐渐增长 飙升到98%了 解决方法: 重启主机 重启SqlServer服务 设置最大内存 前两种方法不太适合线上环境 且指标不治本 建议用设置最大内存 如 ...

  4. Type Interceptors

    Type Interceptors Castle.Core, part of the Castle Project, provides a method interception framework ...

  5. selenuim&PhantomJS&Beautifulsoup练习经典实例

    # coding = utf-8__autor__ = 'litao' from selenium import webdriverfrom selenium.webdriver.common.by ...

  6. 九个console命令调试JS

    下面九个console命令,可以帮助我们更方便地调试 常用的console命令,最常用的事console.log() 1 //常用的console命令,其中最常用的console.log() 2 co ...

  7. CentOS7.X安装FastDFS-5.10

    安装准备 yum install \ vim \ git \ gcc \ gcc-c++ \ wget \ make \ libtool \ automake \ autoconf \ -y \ 安装 ...

  8. Java 内部类“覆盖"

    Think in Java  P269 如果子类中的内部类和父类中内部类一样,这好像子类内部类“覆盖”了父类的内部类,但其实没有代表着什么. public class BigEgg extends E ...

  9. 本站CSS代码

    body { /*字体样式*/ font-family: "youyuan",幼圆,"MicrosoftJhengHei",华文细黑,STHeiti,MingL ...

  10. IrfanView - 图片浏览、编辑、批处理神器

    picasa 停止更新后,需要一款合适的替代品.比较了一番后,选定了 IrfanView. 1. 安装 从 官方网站 下载安装即可,软件只有几兆大小. 2. 常用快捷键 所有快捷键可以参考 这里. I ...