原文地址: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. 持续集成之Jenkins+Gitlab实现持续集成 [二]

    持续集成之Jenkins+Gitlab实现持续集成 [二] 项目:使用git+jenkins实现持续集成 开始构建  General  源码管理 我们安装的是Git插件,还可以安装svn插件  我们将 ...

  2. [置顶] Web用户的身份验证及WebApi权限验证流程的设计和实现 (不是Token驗證!!!不是Token驗證!!!都是基於用户身份的票据信息驗證!!!)

     转发 http://blog.csdn.net/besley/article/details/8516894 不是Token驗證!!!不是Token驗證!!!都是基於用户身份的票据信息驗證!!! [ ...

  3. ThinkPHP 3.1.2 查询方式 -4

    一.普通查询方式 a.字符串 $arr=$m->where("sex=0 and username='gege'")->find(); b.数组 $data['sex' ...

  4. vue之后台管理系统遇到的几个痛点

    杂七杂八的一些日总结 1.vue(最)合理的处理表单提交和初始化表单数据显示的方式 对于表单处理,繁琐的一个地方就是当出现多个下拉选择的表单框的时候,我们需要进行多次将选择的文本去换对应的id值的操作 ...

  5. java设计模式-Iterator

    Iterator模式 主要是用在容器的遍历上,其他的地方都不怎么用:理解一下,会用了就可以了:   1.背景 请动手自己写一个可以动态添加对象的容器: 代码: ArrayList.java(是自己实现 ...

  6. C语言中sizeof与strlen的区别

    1.sizeof sizeof为编译时期被替换,不会等到程序运行再来判断,所以sizeof返回的是数组的总字节数 #include<stdio.h> int main() { ]={'a' ...

  7. PG cannot execute UPDATE in a read-only transaction | How to add column if not exists on PostgreSQL

    PG cannot execute UPDATE in a read-only transaction出现这种情况时,说明SQL语句可能是运行在一个PG集群中的非master节点上.查看data/pg ...

  8. 制作OpenStack云平台centos6.5镜像

    创建虚拟镜像 # qemu-img create -f raw Cloud_Centos6.5_64bit.img 10G [root@localhost ~]# ll /opt/CentOS-6.5 ...

  9. 利用原生js的Dom操作实现简单的ToDoList的效果

    效果如下: 前端及js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  10. Jmeter(七)Jmeter脚本优化(数据与脚本分离)

    午休时间再来记一记,嗯..回顾着使用Jmeter的历程,想着日常都会用到的一些功能.一些组件:敲定了本篇的主题----------是的.脚本优化. 说起脚本优化,为什么要优化?又怎么优化?是个永恒的话 ...