//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. Codeforce 1255 Round #601 (Div. 2)D. Feeding Chicken (模拟)

    Long is a huge fan of CFC (Codeforces Fried Chicken). But the price of CFC is increasing, so he deci ...

  2. UVA-2【NOI2014】起床困难综合症

    #2. [NOI2014]起床困难综合症 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过 ...

  3. HTML(表单标签)

    <form> 标签 用于为用户输入创建 HTML 表单 表单能够包含 input 元素,比如:文本字段.复选框.单选框.提交按钮等等 表单用于向服务器传输数据 action 属性:规定当提 ...

  4. FTP服务器项目的一些整理

    几个月前按照网上的教程写了一个FTP的服务器,现在回头整理一下里面的一些知识. FTP简介 FTP是文件传输协议(File Transfer Protocol),工作在TCP/IP协议族的应用层,其传 ...

  5. rsync 服务及部署

    1 rsync简介 1.1 什么是rsync rsync: - a fast, versatile, remote (and local) file-copying toolrsync:是一种快速,多 ...

  6. java基础篇 之 异常丢失

    我们看如下代码: @Slf4j public class Test { public static void main(String[] args) { try { try { test(); } f ...

  7. 【Hadoop离线基础总结】HDFS详细介绍

    HDFS详细介绍 分布式文件系统设计思路 概述 只有一台机器时的文件查找:hello.txt /export/servers/hello.txt 如果有多台机器时的文件查找:hello.txt nod ...

  8. pyhanlp安装教程

    1.hanlp简介 HanLP是由一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环境中的应用.HanLP具备功能完善.性能高效.架构清晰.语料时新.可自定义的特点. Hanlp具有 ...

  9. 【Linux系列汇总】小白博主的嵌入式Linux实战快速进阶之路(持续更新)

    我把之前在学习嵌入式Linux和工作中遇到问题和相关经验等,一起整理到这里,方便自己查阅和学习,温故而知新,如果能帮助到您,请帮忙点个赞: 本文的宗旨 嵌入式Linux 的项目通常需要一个团队来开发, ...

  10. EI检索

    第一步: 网址:http://www.elsevier.com/online-tools/engineering-village 第二步: 网址:http://www.engineeringvilla ...