原文地址:https://segmentfault.com/a/1190000015424389

修改后地址:https://scrimba.com/c/cqKv4VCR

HTML code:

<div class="loader">
<span>Loading...</span>
</div>

CSS code:

html, body {
margin:;
padding:;
}
/* 设置body的子元素水平垂直居中 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
overflow: hidden;
}
/* 设置容器尺寸 */
.loader {
position: relative;
/* 在此调节font-size可以调节整个loader的大小,前提是不能在后代元素里设置font-size了 */
font-size: 30px;
width: 10em;
height: 10em;
border: 1px solid white;
/* 画出组成圆的顶部弧线 */
border-top: 0.3em solid hotpink;
border-radius: 50%;
/* width、height包括边框、内边距、内容区 */
box-sizing: border-box;
animation: rotating 2s ease-in-out infinite;
--direction:;
}
/* 用伪元素画出组成圆的另外 2 条弧线 */
.loader::before,
.loader::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
box-sizing: border-box;
top: -0.2em;
}
.loader::before {
border-top: 0.3em solid dodgerblue;
transform: rotate(120deg);
}
.loader::after {
border-top: 0.3em solid gold;
transform: rotate(240deg);
}
/* 设置文字样式 */
.loader span {
position: absolute;
color: white;
width: inherit;
height: inherit;
text-align: center;
line-height: 10em;
font-family: sans-serif;
animation: rotating 2s linear infinite;
--direction: -1;
}
@keyframes rotating {
50% {
transform: rotate(calc(180deg * var(--direction)));
} 100% {
transform: rotate(calc(360deg * var(--direction)));
}
}

63.(原65)纯 CSS 创作一个摇摇晃晃的 loader的更多相关文章

  1. 63.1拓展之纯 CSS 创作一个摇摇晃晃的 loader

    效果地址:https://scrimba.com/c/cqKv4VCR HTML code: <div class="loader"> <span>Load ...

  2. 前端每日实战:65# 视频演示如何用纯 CSS 创作一个摇摇晃晃的 loader

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

  3. 如何用纯 CSS 创作一个摇摇晃晃的 loader

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

  4. 63(原67).纯 CSS 创作单元素点阵 loader

    原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...

  5. 如何用纯 CSS 创作一个充电 loader 特效

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

  6. 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

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

  7. 45.纯 CSS 创作一个菱形 loader 动画

    原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3 感想: 网格布局-> display: grid; HTML co ...

  8. 42.纯 CSS 创作一个均衡器 loader 动画

    原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...

  9. 8.纯 CSS 创作一个充电 loader 特效

    原文地址:https://segmentfault.com/a/1190000014669547 右边多出来的是 :after 的border HTML代码: <div class=" ...

随机推荐

  1. jq demo 点击弹窗,居中,可滚动,可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 8.6 C++文本文件的读写操作

    参考:http://www.weixueyuan.net/view/6412.html 总结: 文件类型: 计算机上的文件其实是数据的集合,对文件的读写归根结底还是对数据的读写操作.文件可以大致分为两 ...

  3. Centos7修改分区空间

    一:缩小/home空间 1.1:备份/home内容 cp -r /home/* /homebak 1.2:删除挂载/home umount /home 1.3:删除/home所在lv lvremove ...

  4. java中的线程问题是(四)——线程同步问题

    多线程的并发,给我们编程带来很多好处,完成更多更有效率的程序.但是也给我们带来线程安全问题. 解决问题的关键就是要保证容易出问题的代码的原子性,所谓原子性就是指:当a线程在执行某段代码的时候,别的线程 ...

  5. Master-Worker设计模式介绍

    Master-Worker模式是常用的并行设计模式.核心思想是,系统由两个角色组成,Master和Worker,Master负责接收和分配任务,Worker负责处理子任务.任务处理过程中,Master ...

  6. TOJ-5395 大于中值的边界元素

    描述 给定一个二维数组,求二维数组的边界元素中,大于二维数组“中值”的元素个数.这里的“中值”定义为一个元素序列中: (1)当元素个数为奇数时,即为中间大的元素: (2)当元素个数为偶数时,为中间大的 ...

  7. find语法

    语法 find path -option [ -print ] [ -exec -ok command ] {} \; 参数说明 : find 根据下列规则判断 path 和 expression,在 ...

  8. 入门项目 A2 setting

    import os # 因为setting是设置模块,存放的是一些和系统关联的一些信息,比如对C,D盘符的路径调用 BASE_PATH = os.path.dirname(os.path.dirnam ...

  9. linux vi命令详解

    刚开始学着用linux,对vi命令不是很熟,在网上转接了一篇. vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指 ...

  10. Linux 挂载windows目录

    1.默认情况下,Linux服务器会装有samba-client,但是没有装samba-server.但是访问Windows系统共享,安装有samba-client就可以了. [root@test ~] ...