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 可交互视频教程 此视频 ...
随机推荐
- mysql编译安装（详细）(转载)
mysql编译安装(详细) 一.编译安装MySQL前的准备工作 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl 安装cmake,从 ...
- github上传本地仓库
前提是你已经有了自己的github账号,并且已经关联了本地和远程的仓库,设置好了ssh密钥.自行百度解决. 上传的主要命令: git init git add . git commit -m &quo ...
- 使用keytool 生成数字keystore
生成本地证书 在密钥库中生成本地数字证书:需要提供身份.加密算法.有效期等信息: keytool指令如下,产生的本地证书后缀名为:*.keystore keytool -genkeypair -key ...
- python 引用计数
转载:NeilLee(有修改) 一.概述 要保持追踪内存中的对象,Python使用了引用计数这一简单的技术. sys.getrefcount(a)可以查看a对象的引用计数,但是比正常计数大1,因为 ...
- 微信小程序客服消息使用
客服消息使用 为丰富小程序的服务能力,提高服务质量,微信为小程序提供客服消息能力,以便小程序用户可以方便快捷地与小程序服务提供方进行沟通. xiaokefu.com.cn 功能介绍 用户可使用小程序客 ...
- 学习笔记之Bokeh
Welcome to Bokeh — Bokeh 0.12.16 documentation https://bokeh.pydata.org/en/latest/ Bokeh is an inter ...
- 廖雪峰Java6 IO编程-2input和output-4Filter模式
1.JDK提供的InputStream分为两类: 直接提供数据的InputStream * FileInputStream:从文件读取 * ServletInputStream:从HTTP请求读取数据 ...
- USB-IF协会公布最新PD3.0（PPS）协议认证芯片和产品名单
原文: http://www.chongdiantou.com/wp/archives/25510.html 2017年的骁龙技术峰会高通带来了第一款兼容USB PD3.0(PPS)的QC4+充电器, ...
- [UE4]GameplayAbilities，技能系统插件
Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(七)Ability的信息传递等 Unreal Engine 4(虚幻UE4)GameplayAbili ...
- [UE4]GameInstance初始化
GameInstance的生命周期跟游戏进程一样. 每一次进入游戏都会初始化一个GameInstance,直到退出游戏才会被销毁. 不会随着场景的变化而被销毁.