原文地址：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. IntelliJ Idea 跳出括号并且光标移到末尾的快捷键

    直接跳出的shift enter不管现在光标在哪个位置,直接新开一行 跳出双引号:shift + "跳出单引号:'跳出括号:shift + )跳出中括号:]以此类推.

  2. SELinux杂谈

    ----------------------------- 文末有推荐参考文档列表--------------------------- SELinux(Security Enhanced Linux ...

  3. LeetCode——3. Longest Substring Without Repeating Characters

    一.题目链接:https://leetcode.com/problems/longest-substring-without-repeating-characters 二.题目大意: 给定一个字符串, ...

  4. pyqt4 利用信号槽在子线程里面操作Qt界面

    转载:ABigCaiBird #-*- coding:utf-8 -*- ####### from PyQt4.QtCore import * from PyQt4.QtGui import * im ...

  5. OpenSSH多路复用Multiplexing配置

    设置 Session Multiplexing 在客户端节点如下配置/etc/ssh/ssh_config 或~/.ssh/config 就可以直接开启 Session Multiplexing 功能 ...

  6. locust -基础框架

    # coding=utf-8from locust import HttpLocust, TaskSet, taskimport requests # 定义用户行为class UserBehavior ...

  7. UnicodeString基本操作(Ring0)

    #include "Unicode_String_Ring0.h" //bp Unicode_String_Ring0!DriverEntry NTSTATUS DriverEnt ...

  8. MySQL 独立表空间恢复案例

    创建表的时候就会得到元数据.可以通过定义的方式对表的元数据进行生成 这个地方要注意的是 独立表空间当中   ibd & frm分别存储的是什么数据? 表空间:文件系统,为了更好的扩容数据库的存 ...

  9. 管理MariaDB

    查看当前用户信息 MariaDB [aa]> select user(); 查看所有存储用户信息 MariaDB [aa]> desc mysql.user; MariaDB [aa]&g ...

  10. Android 使用自定义字体

    整个项目要使用第三方字体首先将字体文件放到assets文件夹下 因为整个项目要用第三方字体这里我重写了 TextView Button EditText 三个控件 以TextView 为例代码如下   ...