前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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的更多相关文章
- 如何用纯 CSS 创作单元素点阵 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
- 63(原67).纯 CSS 创作单元素点阵 loader
原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...
- 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
随机推荐
- 流氓软件修改IE主页的解决方法
运行regedit HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main 修改以下url Default_Page_URL Firs ...
- [CSP-S模拟测试]:X国的军队(贪心)
题目描述 $X$国和$Y$国开战了! 作为$X$国的军事参谋,你了解到事态的严峻性.为了更好地应付敌人,你收集到了$Y$国城市中$n$个据点的信息,你打算攻破这$n$个据点! 每个据点$i$的信息由火 ...
- SqlServer 查看缓存 并合理设置最大内存
SqlServer 服务器运行一段时间发现内存逐渐增长 飙升到98%了 解决方法: 重启主机 重启SqlServer服务 设置最大内存 前两种方法不太适合线上环境 且指标不治本 建议用设置最大内存 如 ...
- Type Interceptors
Type Interceptors Castle.Core, part of the Castle Project, provides a method interception framework ...
- selenuim&PhantomJS&Beautifulsoup练习经典实例
# coding = utf-8__autor__ = 'litao' from selenium import webdriverfrom selenium.webdriver.common.by ...
- 九个console命令调试JS
下面九个console命令,可以帮助我们更方便地调试 常用的console命令,最常用的事console.log() 1 //常用的console命令,其中最常用的console.log() 2 co ...
- CentOS7.X安装FastDFS-5.10
安装准备 yum install \ vim \ git \ gcc \ gcc-c++ \ wget \ make \ libtool \ automake \ autoconf \ -y \ 安装 ...
- Java 内部类“覆盖"
Think in Java P269 如果子类中的内部类和父类中内部类一样,这好像子类内部类“覆盖”了父类的内部类,但其实没有代表着什么. public class BigEgg extends E ...
- 本站CSS代码
body { /*字体样式*/ font-family: "youyuan",幼圆,"MicrosoftJhengHei",华文细黑,STHeiti,MingL ...
- IrfanView - 图片浏览、编辑、批处理神器
picasa 停止更新后,需要一款合适的替代品.比较了一番后,选定了 IrfanView. 1. 安装 从 官方网站 下载安装即可,软件只有几兆大小. 2. 常用快捷键 所有快捷键可以参考 这里. I ...