原文地址: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. C语言里有没有像C++里面的sort函数一样的函数?有!

    C 库函数 - qsort() 描述 C 库函数 void qsort(void *base, size_t nitems, size_t size, int (*compar)(const void ...

  2. C#手动改变自制窗体的大小

    Form1.cs using System;using System.Collections.Generic;using System.ComponentModel;using System.Data ...

  3. 创建一个vue 项目 必备的几个插件

    第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  - ...

  4. Python学习二十八周(vue.js)

    一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...

  5. 样本失衡会对SVM的影响

    假设正类样本远多于负类 1.线性可分的情况 假设真实数据集如下: 由于负类样本量太少,可能会出现下面这种情况 使得分隔超平面偏向负类.严格意义上,这种样本不平衡不是因为样本数量的问题,而是因为边界点发 ...

  6. django模型系统一

    django模型系统一 1.数据库的连接配置 django连接mysql的配置流程 安装pymysql       **  pip install pymysql 修改配置 修改setting的配置文 ...

  7. poj 3264 倍增 ST表

    #include<iostream> #include<cmath> using namespace std; ; int a[maxn]; ]; ]; int quick(i ...

  8. java 程序编译和运行过程

    java整个编译以及运行的过程相当繁琐,我就举一个简单的例子说明: Java程序从源文件创建到程序运行要经过两大步骤: 1.源文件由编译器编译成字节码(ByteCode): 2.字节码由java虚拟机 ...

  9. 定时任务BlockingScheduler

    def task(): current_time = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S') print(current_time) ...

  10. APDL link180单元

    目录 APDL代码实现link180单元的使用 结果图片 APDL代码实现link180单元的使用 由于不知道怎样使用LINK180单元,故按照相关的教程和理解,整理了一下比较完整的APDL的代码.其 ...