2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效
扩展后地址:https://scrimba.com/c/cNJVWUR
HTML代码:
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
CSS代码:
/* 居中显示 */
html, body {
margin:;
padding:;
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-radius: 50%; }
/* 设置 3 个矩形的尺寸: */
.loader span:nth-child(1) {
border: 5px solid red;
width: 100%;
height: 100%;
}
.loader span:nth-child(2) {
border: 5px solid green;
width: 70%;
height: 70%;
margin: 15%;
}
.loader span:nth-child(3) {
border: 5px solid blue;
width: 40%;
height: 40%;
margin: 30%;
}
/* 定义动画效果:*/
@keyframes rotating1 {
from {
transform: rotateY(0deg);
} to {
transform: rotateY(360deg);
}
}
/* 把动画应用到 3 个矩形上:*/
.loader span:nth-child(1) {
animation: rotating1 linear infinite;
animation-duration: 4s;
}
/* 定义动画效果:*/
@keyframes rotating2 {
from {
transform: rotateX(0deg);
transform-origin:center center;
} to {
transform: rotateX(360deg);
}
}
/* 把动画应用到 3 个矩形上:*/
.loader span:nth-child(2) {
animation: rotating2 linear infinite;
animation-duration: 4s;
}
/* 定义动画效果:这里无效 需补充*/
@keyframes rotating3 {
from {
skew(0deg,0deg);
}
to {
skew(360deg,360deg);
}
}
/* 把动画应用到 3 个矩形上:*/
.loader span:nth-child(3) {
animation: rotating3 linear infinite;
animation-duration: 4s;
}
2.纯 CSS 创作一个矩形旋转 loader 特效的更多相关文章
- 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
- 11.纯 CSS 创作一个荧光脉冲 loader 特效
原文地址:https://segmentfault.com/a/1190000014700727 HTML代码: <html> <head> <link rel=&quo ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...
- 如何用纯 CSS 创作一个极品飞车 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 ...
- 前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
随机推荐
- Luogu 3246 序列
Luogu 3246 序列 考虑莫队,不算特别优秀,但足以通过此题. 用莫队做,先考虑在当前区间右边加入一个数对答案的影响,其他三种情况同理. 若加入新数的区间为 \([L,R]\) ,那么加的贡献就 ...
- 强连通分量【k 算法、t 算法】
连通分量就是一个各个顶点能互相达到的图 无向图的连通分量选取任意一个顶点使用DFS遍历即可,遍历完所有顶点所需的DFS的次数就是连通分量的数量 有向图的强连通分量由于是有向的[从A点开始DFS能访问到 ...
- 【spring源码分析】spring AspectJ的Execution表达式
在使用spring框架配置AOP的时候,不管是通过XML配置文件还是注解的方式都需要定义pointcut"切入点" 例如定义切入点表达式 execution (* com.sam ...
- C# NPOI导出Excel和EPPlus导出Excel
转自:http://www.cnblogs.com/tanpeng/p/6155749.html 系统中经常会使用导出Excel的功能.之前使用的是NPOI,但是导出数据行数多就报内存溢出. 最近看到 ...
- Hadoop学习笔记(1)(转)
Hadoop学习笔记(1) ——菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序. ...
- smarty学习——变量
变量的处理对于模板来说是比较重要的. Smarty有几种不同类型的变量. 变量 的类型取决于它的前缀是什么符号(或者被什么符号包围) Smarty的变量可以直接被输出或者作为函数属性和修饰符(modi ...
- java打jar包的几种方式详解
经常会头疼于一个jar包是如何制作的,包括maven的打包方式,springboot的打jar包的原理,jar包稍稍有错误就会完全无法运行.在网上折腾了很久终于有些思路和步骤,在这里做个笔记 本文目录 ...
- Jenkins系列之Jenkins配置常用工具和如何下载插件
上一篇我们介绍了Jenkins的安装,这一篇我们介绍如何配置Jenkins的工具和如何下载插件. 首先我们先来看如何配置工具,这里的工具是指JDK.Ant.Maven.Git等. 1.点击系统管理,如 ...
- C# Request.Params与Request.QueryString 的区别
1.Request.Params包含Request.QueryString,request.form.request.cookies和request.servervariables.这几种查找的时候会 ...
- 【python】列表&&元组&&字典
列表:用“[]”包裹,可对值增删改. 列表遍历: 方法一: alist=["a","b","c","d","e ...