//css部分

body{

    margin:;

    padding:;

    background: #262626;

}

.ring{

 position: absolute;

 top:50%;

 left: 50%;

 transform: translate(-50%,-50%);

 width: 150px;

 height: 150px;

 background: transparent;

 border: 3px solid #3c3c3c;

 border-radius: 50%;

 text-align: center;

 line-height: 150px;

 font-family: sans-serif;

 font-size: 20px;

 color: #fff000;

 letter-spacing: 4px;

 text-transform: uppercase;

 text-shadow: 0 0 10px #FFF000;

 box-shadow: 0 0 20px rgba(0,0,0,.5);

}

.ring:before{

    content: "";

    position: absolute;

    top:-3px;

    left:-3px;

    width: 100%;

    height: 100%;

    border: 3px solid transparent;

    border-top: 3px solid #FFF000;

    border-right: 3px solid #FFF000;

    border-radius: 50%;

    animation: animateCricle 2s linear infinite;

}

span{

    display: block;

    position:absolute;

    top:calc( 50% - 2px );

    left: 50%;

    width:50%;

    height: 4px;

    background: transparent;

    transform-origin: left;

    animation: animate 2s linear infinite;

}

span:before{

    content: "";

    position: absolute;

    width:16px;

    height: 16px;

    border-radius: 50%;

    background: #FFF000;

    top:-6px;

    right: -8px;

    box-shadow: 0 0 20px #FFF000;

}

    @keyframes animateCricle

    {

        0%{

            transform: rotate(0deg);

        }

        100%{

            transform: rotate(360deg);

        }

    }

@keyframes animate

{

    0%{

        transform: rotate(45deg);

    }

    100%{

        transform: rotate(405deg);

    }

}

HTML部分

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>预加载</title>

        <link rel="stylesheet" type="text/css" href="demo1.css">

    </head>

    <body>

        <div class="ring">

            Loading

            <span></span>

        </div>

    </body>

</html>

发光加载环动画-纯CSS动画效果-如何创建CSS3旋转预加载器（参照https://www.bilibili.com/video/BV1V4411C7z5?from=search&seid=9741275927942612817）的更多相关文章

  1. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  5. 纯CSS滑动效果

    原文地址:Pure CSS Slide Up and Slide Down 示例地址:Pure CSS Slide Demo 原文日期: 2013年08月26日 翻译日期: 2013年08月27日 如 ...

  6. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  7. 36纯 CSS 动画原理，在页面上表现日蚀现象

    原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...

  8. 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画

    效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...

  9. transition和animation做动画（css动画二）

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

随机推荐

  1. C# 基础知识系列- 14 IO篇 流的使用

    0. 前言 继续之前的C# IO流,在前几篇小短片中我们大概看了下C# 的基础IO也对文件.目录和路径的操作有了一定的了解.这一篇开始,给大家演示一下流的各种操作.以文件流为例,一起来看看如何操作吧. ...

  2. springboot中json转换LocalDateTime失败的bug解决过程

    环境:jdk1.8.maven.springboot 问题:前端通过json传了一个日期:date:2019-03-01(我限制不了前端开发给到后端的日期为固定格式,有些人就是这么不配合),      ...

  3. 线段树 C - Connected Components? CodeForces - 920E

    这个题目居然可以用线段树写,好震惊,如果不是在线段树专题肯定想不到,但是就算在线段树的专题里面,我也不太会怎么写. 这个题目大意是,给你n m n代表n个点,m代表m条边,然后就是m行,每行两个数字, ...

  4. 王颖奇 20171010129《面向对象程序设计（java）》第十四周学习总结

    实验十四  Swing图形界面组件 理论知识知识点: 1.Swing和MVC设计模式2.布局管理器3.文本输入4.选择组件5.菜单6.对话框 实验时间 2018-11-29 1.实验目的与要求 (1) ...

  5. STC8A8K64S4A12通过SPI接口操作基于ST7920的LCD12864液晶模块

    文章地址:https://www.cnblogs.com/jqdy/p/12665430.html 1. 硬件连接 1.1 64引脚的STC8A8K64S4A12 使用的是最小核心板,所以引脚皆引出可 ...

  6. JS实现显示来访者的停留时间

    显示来访者的停留时间 <script language="javascript"> var ap_name = navigator.appName; var ap_vi ...

  7. [工具]微软的学习平台Microsoft Learn很好用，推荐一下

    1. 什么是Microsoft Learn Microsoft Learn是微软这两年大力推广的全新学习平台,可提供 Microsoft 产品交互式学习体验.基本上无需登录即可使用,但登录后可以使用更 ...

  8. CF #635D Xenia and Colorful Gems 枚举+二分

    Xenia and Colorful Gems 题意 给出三个数组,在每个数组中选择一个数字x,y,z,,使得\((x-y)^2+(y-z)^2+(x-z)^2\)最小. 思路 我们假设x<=y ...

  9. leeCode刷题 1078

    给出第一个词 first 和第二个词 second,考虑在某些文本 text 中可能以 "first second third" 形式出现的情况,其中 second 紧随 firs ...

  10. sql 取值时将字符串类型数字转化成整形

    select cast(a.Vchcode as int) as avchcode,a.ptypeid,a.assqty,unit,b.pfullname,b.standard,b.type from ...