原文地址: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. OpenTSDB安装

    时序数据库 时序数据库全称为时间序列数据库.主要用于处理带时间标签(按照时间的顺序变化,即时间序列化)的数据,带时间标签的数据也称为时间序列数据.时间序列数据主要由电力行业.化工行业.物联网行业等各类 ...

  2. 黄聪:FFmpeg 使用指南

    1. ffmpeg 是什么? ffmpeg(命令行工具) 是一个快速的音视频转换工具. 2. ffmpeg 的使用方式 命令行: ffmpeg [全局选项] {[输入文件选项] -i ‘输入文件’} ...

  3. LeetCode——14. Longest Common Prefix

    一.题目链接:https://leetcode.com/problems/longest-common-prefix/ 二.题目大意: 给定若干个字符串,找出它们的最长公共子串. 三.题解: 这道题目 ...

  4. 使用R语言-为矩阵(表格)的行列命名

    转自:http://www.dataguru.cn/article-2217-1.html R语言中经常进行矩阵(表格)数据的处理,在纷繁复杂的数据中,为其行列定义一个名字变得尤为重要.在处理巨量数据 ...

  5. Office 2016 Pro Plus \ Project 专业版 \ Visio 专业版 \ 64 位vol版本方便KMS小马oem

    在使用上,零售版和批量授权版并没有区别,只是授权方式方面的区别,相对而言,VOL 版的更容易激活一些,其他并没有什么区别了. 有需要的可以在下面下载:(以下均是 64位VL 版) 版本:Office ...

  6. vue聊天功能之滚动条自动定位到底部

    一.问题描述 首次进入聊天窗口,数据加载之后先显示最早消息,后显示最新消息,也就是数据加载完之后,延迟了一个时间滚动条才自动定位到最底部. 二.解决方案 如果数据在刚好加载完的时候滚动条就定位到了最底 ...

  7. HTTP请求报文

    一个HTTP请求报文,有请求行request line.请求头部header.空行和请求数据组成.看下图可知: 1.请求行 请求行:请求方法.请求地址和协议版本. 请求方法 HTTP/1.1 定义的请 ...

  8. 固态硬盘使用简要手册——windows平台

    第一步,请安装它. 第二步,请关闭磁盘整理功能,如图 详细:控制面板--管理工具--任务计划程序 打开界面,设置如下 图1 第三步:预读(Superfetch)和快速搜索(Windows Search ...

  9. centos7.0下增加swap分区大小

    承接上篇文章扩容磁盘空间后增加根分区的大小后,来扩容swap分区的空间 检查当前的swap分区情况 # free -m # free -g [root@localhost ~]# free -m to ...

  10. idea 破解方法--可以使用到2099年

    破解方式有2种,第一种比较方便 第一种比较方便 1.使用注册码破解:http://idea.lanyus.com/ 复制这段: 2. 修改hosts文件: hosts位置:C:\Windows\Sys ...