原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0

感想:rotateX() 和rotateZ()一起使用好懵呀。

HTML code:

<div class="loader" title="width:8em,height:8em" >
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS code:

html, body {
margin:;
padding:;
}
/* 设置所有元素的width、height包括其padding、border、content */
*{
box-sizing: border-box;
}
/* 设置body子元素水平垂直居中 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: goldenrod;
}
/* 设置.loader容器样式 */
.loader {
position: relative;
/* 在此修改font-size大小可以改变整个图形大小 */
font-size: 30px;
width: 8em;
height: 8em;
border: 1px solid black;
}
/* 画出圆点span */
.loader span{
/* 绝对定位设置动画起始位置 */
position: absolute;
top: 4em;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #222;
/* 设置旋转定点位置、动画、延时 */
transform-origin: 4em top;
animation: dance 2s linear infinite;
animation-delay: calc((var(--n) - 5) * 0.2s);
}
@keyframes dance{
to{
/* rotateX绕x轴旋转 rotateZ绕z轴旋转 这里还是没弄明白 */
transform: rotateX(360deg) rotateZ(360deg);
}
}
.loader span:nth-child(1) { --n:; }
.loader span:nth-child(2) { --n:; }
.loader span:nth-child(3) { --n:; }
.loader span:nth-child(4) { --n:; }
.loader span:nth-child(5) { --n:; }

71.纯 CSS 创作一个跳 8 字型舞的 loader的更多相关文章

  1. 前端每日实战:71# 视频演示如何用纯 CSS 创作一个跳 8 字型舞的 loader

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

  2. 如何用纯 CSS 创作一个跳 8 字型舞的 loader

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

  3. 25.纯 CSS 创作一个慧星拖尾效果的 loader 动画

    原文地址:https://segmentfault.com/a/1190000014916281 简化地址:https://codepen.io/pen/?editors=1100 HTML代码: & ...

  4. 如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画

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

  5. 前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画

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

  6. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  7. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

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

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

  9. 如何用纯 CSS 创作一个过山车 loader

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

随机推荐

  1. 利用python破解sqlserver账号密码

    一.编写密码测试函数 在用python连接mssql数据库的时候,通常会使用pymssql模板中的connect函数,格式如下: connect(server,user,password,databa ...

  2. Android游戏引擎总汇 原文出处:http://software.intel.com/en-us/blogs/2012/03/13/game-engines-for-android?page=1

    随着Android系统的使用越来越广泛,了解一下Android平台下的游戏引擎就非常有必要.而同时因为基于Intel x86的移动设备越来越多,我也非常关注支持x86的移动游戏引擎.然而就目前为止游戏 ...

  3. python入门——热量转换 I

    热量转换 I 描述 卡路里,简称卡(Calorie),缩写为cal,定义为在1个大气压下,将1克水提升1摄氏度所需要的热量,卡是能量单位,被广泛使用在营养计量方面.国际能量标准单位是焦耳(joule) ...

  4. edgedb 内部pg 数据存储的探索 (五) 运行进程列表信息

    做为一个简单的记录,方便后期分析学习 当前包含了一个timescale 的extension 可以不用关注 信息 ps -ef |grep edgedb edgedb 10559 24858 0 4月 ...

  5. [随笔][Java][总结][java 类型系统]

    java 的类型系统大体分为两类,对象和基本类型.java使用静态类型检查来保证类型安全.每个变量在使用之前需要声明.非静态类型的语言不要求变量在使用之前进行声明. 基本数据类型 java的基本类型不 ...

  6. SMD 自动点料机维修

    SMD 自动点料机维修 这个工具是一个好帮手,但是过完年回来发现坏了. 设置了数量不会自动停,按停止键没有反应,一定要按打印键才能停止. 这可愁死我了. 正常情况下开机设置好数量,然后开始点数,点到数 ...

  7. vue2-通过axios实现数据请求

    1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...

  8. Scaffold(Material库中提供的页面脚手架)知识点

    Scaffold 包含:appBar.body.floatingActionButton

  9. 1、链表之增、删、查实现(C语言)

    一.功能描述: 可以创建节点并添加到链表中.查看链表中的所有节点.并可以删除特定的节点 二.代码实现 1.主函数main主要实现的是从后台键入不同的字符,执行对应的函数来实现特定的操作代码如下: in ...

  10. 如何一步一步新建一个Owin项目

    打开VS2015,新建Web应用程序,命名为OwinWeb(名字随意). 在弹出的“新建ASP.NET项目”窗口中选择“Empty”模板,“为以下项添加文件夹和核心引用”处全不选.点击确定. 创建完后 ...