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

简化地址:https://codepen.io/pen/?editors=1100

HTML代码:

<div class="loader">
<div class="face">
<div class="circle"></div>
</div>
<div class="face">
<div class="circle"></div>
</div>
</div>

CSS代码:

html,
body,
.loader {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.loader {
width: 200px;
height: 200px;
position: relative;
}
.loader .face {
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
border-top-color: var(--color);
border-left-color: var(--color);
animation: animate 3s linear infinite;
}
.loader .face:nth-child(1) {
width: 100%;
height: 100%;
--color: gold;
--deg: 0deg;
}
.loader .face:nth-child(2) {
width: 70%;
height: 70%;
--color: lime;
--deg: 180deg;
animation-direction: reverse;
}
.loader .face .circle {
position: absolute;
width: 50%;
height: 1px;
top: 50%;
left: 50%;
background-color: transparent;
transform: rotate(calc(var(--deg) - 45deg));
transform-origin: left;
}
.loader .face .circle::before {
position: absolute;
top: -5px;
right: -5px;
content: '';
width: 10px;
height: 10px;
background-color: var(--color);
border-radius: 50%;
box-shadow: 0 0 20px var(--color),
0 0 40px var(--color),
0 0 60px var(--color),
0 0 80px var(--color),
0 0 100px var(--color),
0 0 0 5px rgba(255, 255, 0, 0.1);
}
@keyframes animate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

25.纯 CSS 创作一个慧星拖尾效果的 loader 动画的更多相关文章

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

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

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

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

  3. 71.纯 CSS 创作一个跳 8 字型舞的 loader

    原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...

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

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

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

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

  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. 51.纯 CSS 创作一个雷达扫描动画

    原文地址:https://segmentfault.com/a/1190000015283286 感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , ...

随机推荐

  1. django get post files请求知识点

    GET: 我们在浏览器里直接键入地址回车,这种方式其实也是get方式提交了数据,如: http://localhost/login?user=123&pwd=123  就是把用户名123密码1 ...

  2. git 强行pull并覆盖本地文件

    git 强行pull并覆盖本地文件 git fetch --all git reset --hard origin/master git pull

  3. 实现java随机数Random的几招

    一,在java.util这个包里面提供了一个Random的类,我们可以新建一个Random的对象来产生随机数,可以产生随机整数.随机float.随机double,随机long,这个也是我们经常用的一个 ...

  4. P2871 手链

    传送 这个题的数据限制没有翻译出来,所以有可能产生爆内存现象 再此翻译一下:1<=n(物品个数)<=3402,1<=M(总重量)<=12880 (就这两个有点用) 显然这是一个 ...

  5. 不同安卓手机的 安卓版本不同,xpath元素也不同

    模拟器是 夜神模拟器 版本是 4.4.2 LG手机  版本是 8.0.0

  6. Linux环境下配置maven环境

    1.下载安装包并解压 安装包直接去apache官网下载:https://maven.apache.org/download.cgi 将安装包放在自己指定的目录:/home/software/apach ...

  7. JSON: 介绍、应用

    ylbtech-JSON:  介绍.应用 JSONP(JSON with Padding)是 JSON 的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的 ...

  8. [UE4]打包EXE

    Building configuration 1.Development:开发模式.不会压缩文件 2.Shipping,成品模式.移动版本会自动压缩文件

  9. route

    route   添加/删除一条到192.168.3.0/24的路由,网关为192.168.1.254? route add/del  -net 192.168.3.0 netmask 255.255. ...

  10. Python的多态、继承与封装

    一.多态 不用知道变量所引用的对象类型,还是能对它进行操作,它会根据对象(或类)的类型不同而表现出不同的行为. def run_twice(animal): animal.run() animal.r ...