原文地址: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. Java基础知识学习思维导图

  2. 实验五 CC2530平台上ADC组件的TinyOS编程

    实验五 CC2530平台上ADC组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握传感器的ADC组件应用方法 学生通过本实验能够初步的了解和掌握CC ...

  3. ViewpageWebview

    import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bund ...

  4. Linux命令行下载工具

    目录 wget aria2 cURL Youtube-dl https://zh.wikipedia.org/wiki/下载管理程序比较 https://wiki.archlinux.org/inde ...

  5. Python中serial的使用

    一.概述     pyserial模块封装了对串口的访问. 二.特性     在支持的平台上有统一的接口.     通过python属性访问串口设置.     支持不同的字节大小.停止位.校验位和流控 ...

  6. Python练习六

    1.写函数,计算传入字符串中[数字].[字母].[空格].以及[其他]的个数,并返回结果. def day06_1(s): dic = {'num': 0, 'alpha': 0, 'space': ...

  7. python基础教程001_安装python

    1.安装python Windows http://www.python.org下载python安装包 比如python-2.7.12.msi执行安装 安装完毕后,开始->搜索程序跟文件-> ...

  8. stolon cloud native postgresql 高可用方案

    stolon方案与patroni 类似,是一个新的pg ha 方案 包含的组件 keeper:它管理一个PostgreSQL实例,汇聚到由领导者sentinel计算的clusterview. sent ...

  9. bond-team

    nmcli con add type team con-name team0 ifname team0 config '{"runner":{"name": & ...

  10. 谷歌浏览器可以google了

    做为一个开发者好多疑问点或者难点大多数时间 都在进行百度,百度也能解决问题,但是呢如果让我能够google呢?我肯定会优先google的,这里面能够搜到一些国外技术人的文章可供参考. 下面是一个能够支 ...