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 可交互视频教程 此视频 ...
随机推荐
- backgroud 应用减小资源大小和请求数
一,一个典型的应用,利用小图的自动延伸,实现整个网页背景图,充分节约资源宽带.如:汽车之家的404页背景图就是这样 <div style="height: 3000px; backgr ...
- influxDB硬件配置指南
原地址:https://docs.influxdata.com/influxdb/v1.6/guides/hardware_sizing/ 警告!此页面记录了不再积极开发的InfluxDB的早期版本. ...
- 研究js特效巩固JavaScript知识
400多个JavaScript特效大全,包含全部源代码和详细代码说明,不可多得 JavaScript实现可以完全自由拖拽的效果,带三个范例 http://www.sharejs.com/show ...
- Tomcat实战-调优方案
Tomcat的默认配置,性能并不是最优的,可以通过优化tomcat以此来提高网站的并发能力.提高Tomcat的性能可以分为两个方向. 服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有决定 ...
- C++进阶--解谜operator new/delete
//############################################################################ // 解谜operator new/del ...
- FB的破解与安装
1使用破解序列号安装 先找到host文件,一般可能是隐藏的windows/system32/drivers/etc在下面加入127.0.0.1 activate.adobe.com127.0.0.1 ...
- 写在vue总结之前（二）
都说要快速学会一个技术(会使用),比如一个框架,在实际的工作中做相关的项目是最快的学习方式.而为什么在实际的工作项目中去学习是最快的方式?个人的体会是,在实际的工作项目中,很多功能的实现是你不得不做的 ...
- vc++post方式登录网站
以http://www.idc3389.com为例: 效果图: 使用Fiddler工具进行抓包,截图: 可以发现: 1.并没有使用cookie并没有用作用户身份识别,因为登录前后的cookie并没有发 ...
- 信息安全-加密：RSA 算法
ylbtech-信息安全-加密:RSA 算法 RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥推导出解密密钥在计算上是不可行的”密码体制. 1.返 ...
- Python twilio发短信实践
twilio注册地址 注册的时候可能会报错 最好是*** -->注册-->注册完毕后代码运行是不需要***的 https://www.twilio.com/console 需要pi ...