前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/vjLQMM
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 github 下载。
代码解读
定义 dom,一个包含 3 个 span 的容器:
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
居中显示:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
设置容器的尺寸:
.loader {
width: 150px;
height: 150px;
position: relative;
}
设置矩形的边框样式:
.loader span {
position: absolute;
box-sizing: border-box;
border: 10px solid dimgray;
border-radius: 2px;
}
设置 3 个矩形的尺寸:
.loader span:nth-child(1) {
width: 100%;
height: 100%;
}
.loader span:nth-child(2) {
width: 70%;
height: 70%;
margin: 15%;
}
.loader span:nth-child(3) {
width: 40%;
height: 40%;
margin: 30%;
}
用伪元素绘制左上和右下的装饰条:
.loader span::before,
.loader span::after {
content: '';
position: absolute;
width: 10px;
height: 50%;
background-color: gold;
}
.loader span::before {
top: -10px;
left: -10px;
}
.loader span::after {
bottom: -10px;
right: -10px;
}
定义动画效果:
@keyframes rotating {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
把动画应用到 3 个矩形上:
.loader span {
animation: rotating linear infinite;
}
.loader span:nth-child(1) {
animation-duration: 4s;
}
.loader span:nth-child(2) {
animation-duration: 2s;
}
.loader span:nth-child(3) {
animation-duration: 1s;
}
最后,设置一下 3 个矩形的堆叠顺序:
.loader span:nth-child(1) {
z-index: 3;
}
.loader span:nth-child(2) {
z-index: 2;
}
.loader span:nth-child(3) {
z-index: 1;
}
大功告成!
知识点
- @keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
- animation-duration https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
- rotateY https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY
- nth-child https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
- z-index https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
- ::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before
- ::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after
前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效的更多相关文章
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- 前端每日实战:81# 视频演示如何用纯 CSS 创作一个变色旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 此视频是可 ...
- 前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 此视频是可 ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...
随机推荐
- 前端框架React入门课程【视频】
视频教程列表: http://v1.mukewang.com/1a8228ac-5f7f-48de-b1c5-7d1b8bce9c77/L.mp4 1-1 React入门课程介绍 http://v1. ...
- sqoop应用
1.导入数据(将mysql(rdbms)的表的数据导入到hdfs) 1.1.全部导入(注意空格) sqoop import \ --connect jdbc:mysql://192.168.159.1 ...
- 2019_Chrome和ChromeDriver对应关系
Chrome和ChromeDriver对应关系 ChromeDriver下载地址:http://chromedriver.storage.googleapis.com/index.html Chrom ...
- Mac013--Docker安装
一.Docker安装教程 参考:http://www.runoob.com/docker/macos-docker-install.html 可应用brew命令安装,也可自定义下载安装. 应用brew ...
- Ubuntu操作系统的总结操作
一.Ubuntu系统环境变量 Ubuntu Linux系统环境变量配置文件分为两种:系统级文件和用户级文件 1.系统级文件: /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件 ...
- MySQL学习笔记(上)
在进行SQL注入原理的剖析的时候,对MySQL数据库掌握薄弱,参照菜鸟教程的MySQL教程速刷一遍MySQL 关于MySQL MySQL是最流行的关系型数据库管理系统,在WEB方面MySQL是最好的R ...
- Neo4j 修改关系类型 type
没有直接修改的函数,也不需要,下面代码就可以: MATCH (n:User {name:"foo"})-[r:REL]->(m:User {name:"bar&qu ...
- 正则表达式RegExp对象
3.1 正则表达式对象的创建方式 字面量的方式 var patt = /匹配规则/修饰符; / --> 边界的意思 new关键字 var patt = new RegExp( ...
- 省电的iPhone定位
1.Getting the User’s Current Location 获取用户当前位置. 获取位置的方式有三种:GPS, cell tower triangulation(蜂窝站点), 和 Wi ...
- pg_ctl - 启动,停止和重启 PostgreSQL 服务器
SYNOPSIS pg_ctl start [ -w ] [ -s ] [ -D datadir] [ -l filename] [ -o options] [ -p path] pg_ctl sto ...