效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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. Guid--调用Guid.genID();

    package com.ufgov.ar.common.util; import java.net.InetAddress; /** * <p> * Title: 产生唯一标识 /** * ...

  2. Java WebService服务

    其中cxf框架 http://cxf.apache.org/ Apache CXF™: An Open-Source Services Framework Overview Apache CXF™ i ...

  3. LR分析Analysis火车票

    一.分析结果 1 研究 Vuser 的行为(F:\JMeter\0Tutorial-SCR\机票预订\机票_analysis-session) 筛选该图,仅查看所有 Vuser 同时运行的时间段 右键 ...

  4. Flask学习 4 http方法

    服务端端 #!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: f ...

  5. python比C程序相比非常慢

    w http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001374738136930 ...

  6. jmeter之关联的使用(正则、json)

    部分接口的测试中,一个接口会依赖上一个接口的响应信息,但上一个接口的响应信息又不是固定不变的,这时候,需要提取上一个接口的响应信息,将二者每一次的信息关联起来 目录 1.应用场景 2.jmeter正则 ...

  7. Vagrant 手册之网络 - 私有网络 private network

    原文地址 Vagrantfile 配置文件中私有网络的标识符:private_network,例如: config.vm.network "private_network", ty ...

  8. 下载 GitHub 上保存在 AWS 的文件

    通过 GitHub 下载文件时,发现很多文件保存在亚马逊的 AWS 上.而国内访问 AWS 的速度很慢,经常会有文件下载失败.常用的解决方案是挂代理,但我这边挂了代理还是很慢,只好找其他办法. AWS ...

  9. WPF数据模板中绑定事件不触发问题

    今天比较闲,做一个练手的项目,结果在xaml中写了一个用户的数据模板后,在其中的某个Canvas上绑定了一个鼠标左击的事件,结果调试的时候,无论怎么点击都不跳到断点那里,百思不得其解. 之后尝试不绑定 ...

  10. VS代码自动补全功能

    VS代码自动补全功能 新建工程后,依次打开 工具>>代码段管理器>>选择C++>>点击 添加(A)...按钮 ,设置你的代码块的目录 复制以下代码并存为note.s ...