原文地址: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. 我的代码-normalize

    # coding: utf-8 # In[13]: import pandas as pdimport numpy as npimport scipy as spfrom os import list ...

  2. hadoop MapReduce

    简单介绍 官方给出的介绍是hadoop MR是一个用于轻松编写以一种可靠的.容错的方式在商业化硬件上的大型集群上并行处理大量数据的应用程序的软件框架. MR任务通常会先把输入的数据集切分成独立的块(可 ...

  3. 测试miniconda,python以及机器学习包是否安装成功

    1.测试安装版本 conda -V python -V 2.安装的命令 (1)库升级和安装 升级全部库:  conda upgrade --all [不知道为什么,我的conda install nu ...

  4. 解析观察者模式在安卓程序中的应用——如何实现跨界面Handler通讯

    这里特使用了github中的一个项目作为例子进行解析,地址为:https://github.com/LiqiNew/HandlerFrame/tree/master/handlerFrame/src/ ...

  5. bootstrap简单使用实例

    表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...

  6. java8_api_格式化数据

    格式化数据1    Locale类    格式化日期时间    格式化数字        Locale类,主要是国际化相关        该类代表语言环境        实例化:           ...

  7. Linux csplit命令详解

    Linux csplit命令 Linux csplit命令用于分割文件.拆解文件主要是split和csplit命令,如果说split是按大小来拆分的话,那么csplit则可按匹配来拆分: 将文件依照指 ...

  8. SourceInsight宏插件3(非常好用,强力推荐)

    openfolder.em源码:(链接:https://pan.baidu.com/s/1draaimWzCHZ3vLxL--lfiQ  提取码:zyq4) //使用资源管理器打开当前文件所在文件夹, ...

  9. nginx的location root alias指令以及区别

    原文:http://blog.csdn.net/bjash/article/details/8596538 location /img/ { alias /var/www/image/; } #若按照 ...

  10. Charles更新至4.2.8特别版

    下载地址:链接:https://pan.baidu.com/s/1c2wXdBE 提取码:g7qc 更多工具/教程可进入Q群:测试技术学习小组 478717918