如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/erRzzR
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/011-ripple-pulse-loader-animation
代码解读
定义 dom,只有一个元素:
<div class="circle"></div>
居中显示:
html,
body,
.circle {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
画出中间的实心圆:
:root {
--innerRadius: 2em;
}
.circle {
width: calc(var(--innerRadius) * 2);
height: calc(var(--innerRadius) * 2);
background-color: lime;
border-radius: 50%;
}
画出圆环:
.circle {
box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) black,
0 0 0 var(--innerRadius) lime;
}
用伪元素 ::before 画出动画用到的圆环:
.circle::before {
content: '';
position: absolute;
width: calc(var(--innerRadius) * 2 * 2);
height: calc(var(--innerRadius) * 2 * 2);
border: 2px solid lime;
border-radius: 50%;
}
增加动画效果:
.circle::before
animation: pulse 2s linear infinite;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
优化动画——增加渐淡和弹性效果:
.circle::before
animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
from {
filter: opacity(0.9);
}
to {
filter: opacity(0);
}
}
最后,用伪元素 ::after 再画出一个动的圆环:
.circle::after {
content: '';
position: absolute;
width: calc(var(--innerRadius) * 2 * 2);
height: calc(var(--innerRadius) * 2 * 2);
border: 2px solid lime;
border-radius: 50%;
animation: pulse 2s ease-out infinite;
}
.circle::after {
animation-delay: 1s;
}
大功告成!
知识点
- variables https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables
- calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
- animation-timing-function https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
- filter https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Functions
- box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
原文地址:https://segmentfault.com/a/1190000014700727
如何用纯 CSS 创作一个荧光脉冲 loader 特效的更多相关文章
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 11.纯 CSS 创作一个荧光脉冲 loader 特效
原文地址:https://segmentfault.com/a/1190000014700727 HTML代码: <html> <head> <link rel=&quo ...
- 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 如何用纯 CSS 创作一个极品飞车 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 ...
- 如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- 前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
随机推荐
- 【杂谈】5G有啥用?跟咱有关系么?关注那玩意儿干啥?
用处大了 有啥用? 云计算啊,你看看你电脑都卡成啥了? 既然5G速度赶上本地读取,那就相当于把硬盘放云端没问题了.那么,看看自己硬盘里都有啥,5G的用处或许就能一点点浮现出来了. ——请不要急着打开一 ...
- 跟我一起玩Win32开发(19):浏览和打开文件
在应用程序中,我们很经常要实现的功能,是Open文件或保存文件对话框,让用户来选择一个或N个文件.本文我将介绍两种思路,第一种方法较为复杂,第二种方法较为简单. 方法一:老规矩 这是一种传统方法,使用 ...
- AtCoder Grand Contest 003 E - Sequential operations on Sequence
题目传送门:https://agc003.contest.atcoder.jp/tasks/agc003_e 题目大意 一串数,初始为\(1\sim N\),现有\(Q\)个操作,每次操作会把数组长度 ...
- vue+typescript入门学习
最近想要结合vue学习typescript,了解到vue2.5之后开始支持typescript,就像拿vue学习一下,首先要解决的就是环境的搭建,略微麻烦,如果想要自己体验一把,可以参考这篇文章htt ...
- eclipse 当安装jad仍然不能反编译,提示attach source的时候
当安装jad仍然不能反编译,提示attach source的时候,其实是当前workspace有问题了: 所使用的workspace目录下.metadata\.mylyn会出现一个.tasks.xml ...
- 用eclipse-inst-win64.exe安装eclipse出现Java for Windows Missing 的原因
Java for Windows Missing 因为jdk的版本没有对,我这里是64位的机器上安了32位的jdk,所以一直报这个. 必须换上相对应版本的jdk,提示页面有链接,直接点击就可以下载. ...
- Java三大特性之---封装
封装从字面上来理解就是包装的意思,专业点就是信息隐藏,是指利用抽象数据类型将数据和基于数据的操作封装在一起,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可能地隐藏内部的细节,只保 ...
- 482 License Key Formatting 注册码格式化
详见:https://leetcode.com/problems/license-key-formatting/description/ C++: class Solution { public: s ...
- a=a+b与a+=b的区别
在一次工作中身边的一位资深的同事突然问了个a=a+b与a+=b有什么区别 此时有点尴尬了 不知道是真的不知道咧还是别有用意....今天抽点时间针对此问题做个小总结 一.性能方面 a=a+b是加法运算 ...
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...