11.纯 CSS 创作一个荧光脉冲 loader 特效
原文地址：https://segmentfault.com/a/1190000014700727
HTML代码：
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="circle"></div>
</body>
</html>
CSS代码：
html,
body ,
.circle{
margin:;
padding:;
height: 100%;
display: flex;
justify-content: center;
align-items: center; }
/* 画出中间的实心圆 */
/* :root是一个CSS伪类，它匹配文档的根元素 – <html>元素。
w3 相关地址 http://www.w3school.com.cn/cssref/css_selectors.asp */
:root {
--innerRadius: 2em;
}
.circle {
width: calc(var(--innerRadius) * 2);
height: calc(var(--innerRadius) * 2);
background-color: lime;
border-radius: 50%;
/* 画出圆环 */
box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) white,
0 0 0 var(--innerRadius) lime;
position: relative;
}
/* 用伪元素 ::before 画出动画用到的圆环 ； 用伪元素 ::after 再画出一个动的圆环*/
.circle::before,
.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 linear infinite;
}
.circle::after {
animation-delay: 1s;
}
/* 增加动画效果
优化动画——增加渐淡和弹性效果 */
@keyframes pulse {
from {
/* scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。*/
transform: scale(1);
filter: opacity(0.9);
} to {
transform: scale(2);
filter: opacity(0);
}
}
11.纯 CSS 创作一个荧光脉冲 loader 特效的更多相关文章
- 前端每日实战：11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 如何用纯 CSS 创作一个极品飞车 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 ...
- 前端每日实战：84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...
- 前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...
随机推荐
- 胖子哥的大数据之路（9）-数据仓库金融行业数据逻辑模型FS-LDM
引言: 大数据不是海市蜃楼,万丈高楼平地起只是意淫,大数据发展还要从点滴做起,基于大数据构建国家级.行业级数据中心的项目会越来越多,大数据只是技术,而非解决方案,同样面临数据组织模式,数据逻辑模式的问 ...
- [蓝桥杯]ALGO-79.算法训练_删除数组零元素
从键盘读入n个整数放入数组中,编写函数CompactIntegers,删除数组中所有值为0的元素,其后元素向数组首端移动.注意,CompactIntegers函数需要接受数组及其元素个数作为参数,函数 ...
- 【springBoot】之概述
springboot是什么? springboot不是对spring的增强,而是一个快速使用spring进行开发的框架. 其产生的背景是因为随着动态语言(Scala,Groovy)的流行,Java语言 ...
- pyqt信号和槽传递额外参数
转载:fengyu09 环境:python2.7.8 —— pyqt 4.11.1 使用Pyqt编程过程中,经常会遇到给槽函数传递额外参数的情况.但是信号-槽机制只是指定信号如何连接到槽,信号定义的参 ...
- Ngui Tween 组合动画 group
使用NGUI的Tween做补间动画,难免会涉及组合各种Tween.最常用的就是 Scale+Alpha组合 做淡入淡出了.那么如何控制 播放完一个Tween 后在 播放另一个Tween呢? 利用del ...
- 使用R语言-操作data.frame
1 向一个data.frame指定列插入一列新数据 1.1 插入一列到指定位置 y<-1:4 data1 <-data.frame(x1=c(1,3,5,7), x2=c(2,4,6,8) ...
- 组合(composite)模式
定义 将对象组合成树形结构以表示“部分-整体”的层次结构,使得用户对单个对象和组合对象的使用具有一致性 组合模式(Composite)将小对象组合成树形结构,使用户操作组合对象如同操作一个单个对象.组 ...
- P1258小车问题
传送 很多人质疑它是二分,但其实它就是二分(我会说我不会解方程吗) 据说有很多人没看懂题干在说些什么,那就不要管题干了.拿样例算一遍,我们看看样例的答案是怎么算出来的. 这是样例.看到这个数,我们很懵 ...
- Linux下使用curl查看http请求各阶段耗时
1. 准备文件模版(curl.txt) \n time_namelookup: %{time_namelookup}\n time_connect: %{time_connect}\n time_ap ...
- Butter Knife 使用方法
获取控件 @InjectView(R.id.image_show_password)ImageView image_show_password; 控件事件 @OnClick(R.id.btn_subm ...