原文地址2.纯 CSS 创作一个矩形旋转 loader 特效

扩展后地址:https://scrimba.com/c/cNJVWUR 

扩展地址:https://codepen.io/pen/

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 特效的更多相关文章

  1. 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...

  2. 11.纯 CSS 创作一个荧光脉冲 loader 特效

    原文地址:https://segmentfault.com/a/1190000014700727 HTML代码: <html> <head> <link rel=&quo ...

  3. 如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...

  4. 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 如何用纯 CSS 创作一个方块旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...

  7. 如何用纯 CSS 创作一个极品飞车 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 ...

  8. 前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可 ...

  9. 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...

随机推荐

  1. JS new RegExp

    ★实例: var regex = new RegExp('k', 'g'); var v1 = 'akbdk'; v1.match(regex); //检索'k',返回数组(次数组中放的是 目标区域中 ...

  2. DZY Loves Math系列

    link 好久没写数学题了,再这样下去吃枣药丸啊. 找一套应该还比较有意思的数学题来做. [bzoj3309]DZY Loves Math 简单推一下. \[\sum_{i=1}^n\sum_{j=1 ...

  3. arduino 配置 esp8266

    在连接之前,先把程序下载到arduino中,很简单,就是定义了软口.如果中间要改动程序,要把rx和tx的连线去掉,不然下载程序可能失败. ; ; void setup() { pinMode(rx,I ...

  4. 多个sshkey 指定key来clone仓库

    Something like this should work (suggested by orip): ssh-agent bash -c 'ssh-add /somewhere/yourkey; ...

  5. socket套接字和驱动绑定分析

    1. socket()系统调用 socket系统调用是哪个:socket()有3个参数,因此搜索SYSCALL_DEFINE3,然后在检索socket即可. SYSCALL_DEFINE3(socke ...

  6. day26 python学习 对象的接口,封装,私用属性 property

    # 抽象类和接口类 #** #不崇尚接口类 #python本身支持多继承,没有接口专用的语法.但是我知道接口的概念 # 接口类:# 是规范子类的一个模板,只要接口类中定义的,就应该在子类中实现# 接口 ...

  7. 分部视图在ASP.NET MVC中的应用

    概述: 在ASP.NET Web Form的开发经验中,对于User Control使用比较频繁,可以减少重复的代码,利于页面模块化,这个概念也被引入了ASP.NET MVC.即“分部视图”. 1.创 ...

  8. Java调用.NET webservice方法的几种方式

    最近做项目,涉及到web-service调用,现学了一个星期,现简单的做一个小结.下面实现的是对传喜物流系统(http://vip.cxcod.com/PodApi/GetPodStr.asmx?ws ...

  9. 消息中间件 ActiveMQ的简单使用

    一.AactiveMQ的下载和安装 1. 下载ActiveMQ 地址:http://activemq.apache.org/activemq-5152-release.html 我这里下载的是wind ...

  10. 【C#】教你纯手工用C#实现SSH协议作为GIT服务端

    SSH(Secure Shell)是一种工作在应用层和传输层上的安全协议,能在非安全通道上建立安全通道.提供身份认证.密钥更新.数据校验.通道复用等功能,同时具有良好的可扩展性.本文从SSH的架构开始 ...