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 可交互视频教程 此视频 ...
随机推荐
- jQuery模态框实现 后台添加删除修改Ip端口
主要用到,$('#i1').each(),标签里绑定函数可传参数this <!DOCTYPE html> <html lang="en"> <head ...
- 测试教程网.unittest教程.5. 实例: 找出所有是弱密码的用户
From: http://www.testclass.net/pyunit/test_example_3/ 背景 当我们的测试数据是下面这些的时候,我们的用例是有问题的. [ {"name& ...
- 测试教程网.unittest教程.4. 实例: 读取测试数据并测试弱密码
From: http://www.testclass.net/pyunit/test_example_2/ 背景 接上一节的弱密码例子,我们的用例尽管运行的不错,但还是有点问题. 假如我们需要增加一些 ...
- [蓝桥杯]ALGO-97.算法训练_排序
题目描述: 问题描述 编写一个程序,输入3个整数,然后程序将对这三个整数按照从大到小进行排列. 输入格式:输入只有一行,即三个整数,中间用空格隔开. 输出格式:输出只有一行,即排序后的结果. 输入输出 ...
- 【nosql】之ehcache.xml文件属性描述
<ehcache updateCheck="false" name="shiroCache"> <defaultCache <!--最大 ...
- python中numpy的random模块
1. rand(d0,d1,.....,dn)产生[0,1]的浮点随机数,括号里面的参数可以指定产生数组的形状 例如:np.random.rand(3,2)则产生 3×2的数组,里面的数是0-1 ...
- zTree分批异步加载方式下实现节点搜索功能(转载)
原文地址:https://segmentfault.com/a/1190000004657854 最近公司做一个项目用到zTree,zTree功能强大就不用多说了,相信用过的人都知道. 公 ...
- java1.8新特性（四 创建 stream对象）
java1.8 提供了 stream对象 可以用作 对 集合 数组的 一系列操作,都是基于lambda 表达式 ,所以得先熟悉lambda 表达式 集合创建stream对象 // 1.集合创建stre ...
- idea+dubbo+zookeeper项目访问html页面的方法
将js,html文件放入consumer的resource的static和template文件中 1 consumer的pom需要引入模板的jar包 <dependency> ...
- GO中DEFER的理解--DEFER执行的原理
在golang当中,defer代码块会在函数调用链表中增加一个函数调用.这个函数调用不是普通的函数调用,而是会在函数正常返回,也就是return之后添加一个函数调用.因此,defer通常用来释放函数内 ...