发光加载环动画-纯CSS动画效果-如何创建CSS3旋转预加载器（参照https://www.bilibili.com/video/BV1V4411C7z5?from=search&seid=9741275927942612817）
//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）的更多相关文章
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- 纯CSS滑动效果
原文地址:Pure CSS Slide Up and Slide Down 示例地址:Pure CSS Slide Demo 原文日期: 2013年08月26日 翻译日期: 2013年08月27日 如 ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- 36纯 CSS 动画原理，在页面上表现日蚀现象
原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...
- 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画
效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...
- transition和animation做动画（css动画二）
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...
随机推荐
- 解决vue渲染时闪烁{{}}的问题
原文转自: 点我 Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也 ...
- 数学--数论--HDU 2104 丢手绢（离散数学 mod N+ 剩余类 生成元）+（最大公约数）
The Children's Day has passed for some days .Has you remembered something happened at your childhood ...
- Java——抽象类与接口的前世今生
该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 1.抽象类: 当编写 ...
- springboot之异常处理
我在使用springboot的时候,运行主类结果报错 : 异常错误:java.sql.SQLException: The server time zone value '?й???????' is u ...
- HDU1300Pearls
传送门 描述: 有几种不同的珍珠.每种珍珠都有它的单价.当然质量高的珍珠价格一定也是高的. 为了避免买家只买1个珍珠.就要求不论是买了多少个珍珠都是需要在购买数量上加10.之后乘上单价. 例如:买5个 ...
- CSS中的间距设置与盒子模型
CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...
- struts2入门教学
我的博客地址:https://blog.csdn.net/qq_41907991 首先介绍一下struts2使用的基本步骤: 1.导入相关的 jar 文件 2.需要在 web.xml 文件中配置一个 ...
- 李婷华 201771010113 《面向对象程序设计（java）》 第二周学习总结
第一部分:理论知识学习部分 第三章 java的基本程序设计结构 本章主要学习数据类型.变量.运算符.类型转换.字符串.输入输出.控制流程.大数值.数组等内容. 1.基本知识 (1)标识符:由字母.下划 ...
- 王颖奇 201771010129《面向对象程序设计（java）》第一周学习总结
<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com wangyingqi 程序 ...
- Coursera课程笔记----计算导论与C语言基础----Week 2
计算机的历史与未来(Week 2) 计算机历史 早期计算机:手工计算器➡️机械计算器➡️计算机原型 现代计算机:电子管计算机➡️晶体管计算机➡️集成电路计算机➡️超大规模集成电路 早期的手工计算辅助工 ...