原文地址：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 特效的更多相关文章

  1. 前端每日实战：11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...

  2. 如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...

  3. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  4. 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 如何用纯 CSS 创作一个极品飞车 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 ...

  7. 前端每日实战：84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...

  8. 如何用纯 CSS 创作一个按钮文字滑动特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...

  9. 前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...

随机推荐

  1. Cygwin使用2-心得

    引用:http://www.jb51.net/article/6236.htm 1.在cygwin里访问Windows盘 cd /cygdrive/c cd c: 2.整合cygwin命令到Windo ...

  2. NPC问题及证明

    致谢:http://www.docin.com/p-1902790324.html

  3. WIN10 网速问题,边下载 边逛论坛 电脑 有点卡

    引用:https://www.chiphell.com/forum.php?mod=viewthread&tid=1961836&extra=page%3D1&mobile=2 ...

  4. OpenTSDB（时序数据库官网）

    官网地址:http://opentsdb.net/ 下载地址:https://github.com/OpenTSDB/opentsdb/releases ----------------------- ...

  5. WPF Demo13通知项属性+数据绑定(代码层)

    <Window x:Class="BindingDemo1.MainWindow" xmlns="http://schemas.microsoft.com/winf ...

  6. js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计

    说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...

  7. Java第11次实验(数据库)

    参考资料 数据结构实验参考文件 数据库初始化文件 MySQL操作视频 数据库相关jar文件请参考QQ群文件. 第1次实验 1. MySQL数据库基本操作 完整演示一遍登录.打开数据库.建表.插入 常见 ...

  8. python中pip和pygame的安装

    1.安装pip和pygame都很简单.首先咱们来安装pip,官网https://pypi.python.org/pypi/pip#download,下载pip的压缩文件,并将其解压. 我们在cmd的p ...

  9. phoenix psqlline输入命令无法删除问题解决技巧

    一.引言: phoenix psqlline使用过程中,使用CRT客户端,命令输入后无法删除,想起曾经处理HBaseShell输入后无法删除的解决办法,尝试了一下,居然有效,还是分享给大家把. 二.操 ...

  10. pytest.6.Parametrize Fixture

    From: http://www.testclass.net/pytest/parametrizing_fixture/ 背景 @pytest.mark.parametrize 装饰器可以让我们每次参 ...