前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
时间:2019-11-26
本文章向大家介绍前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效,主要包括前端每日实战: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
原文地址:https://www.cnblogs.com/homehtml/p/11938012.html
- 重温二分查找算法(r4笔记第66天)
- 【不用框架】文件上传和下载
- JSP第七篇【简单标签、应用、DynamicAttribute接口】
- Java基础-07(02).总结private,this,封装,static,成员方法变量,局部变量匿名对象
- 通过shell脚本快速定位active session问题(r4笔记第65天)
- 01 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之业务分析与DAO层
- JSP第六篇【自定义标签之传统标签】
- 过滤器监听器面试题都在这里
- 02 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之Service层
- JSP第五篇【JSTL的介绍、core标签库、fn方法库、fmt标签库】
- java中的序列化 (r4笔记第64天)
- JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
- 03 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层
- JSP第三篇【JavaBean的介绍、JSP的行为--JavaBean】
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【DB笔试面试866】队列等待之enq: TX - allocate ITL entry
- 【Vue.js】Vue.js组件库Element中的上传、评分、穿梭框和表单
- 【Vue.js】Vue.js项目构建
- 【Vue.js】Vue.js组件库Element中的表格、标签和进度条
- 用个小技巧,趁你不备,rm -rf你的电脑
- 什么是Python 中的EAFP 哲学
- 设计模式--工厂模式
- 设计模式--命令模式
- 安装FastDFS+Nginx
- Redis 中的 5 大数据类型及其常用命令手册
- 设计模式--适配器模式
- 设计模式--外观模式
- 设计模式--模板模式
- springBoot快速入门
- springBoot配置文件