发光加载环动画-纯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:变形:是一个静态属性,可以 ...
随机推荐
- STL部分学习总结
一.map/multimap map/multimap映射容器的元素数据是由一个Key和一个Value成的,key与映照value之间具有一一映照的关系. map/multimap容器的数据结构也采用 ...
- 图论--Dijkstra算法总结
Key word: ①BFS转换Dijkstra ②其他关系转化为最短路 ③反向建边及反向Dijkstra ④稠密图.稀疏图 ⑤链式前向星 ⑥Vector建图 ⑦超级源点&汇点 详解: 1.B ...
- pycharm（py 文件中添加作者、时间）
1.打开 Pycharm,点击 File,再找到 Settings... 2.选择 Editor ----> File and Code Templates ----> Python Sc ...
- python（For 循环语句）
一.For循环 Python for 循环可以遍历任何序列的项目,如一个列表或者一个字符串或者字典等. 语法模式:for var in sequence: (1)从某个集合(列表等)里顺次取值 #遍历 ...
- 「译」Graal JIT编译器是如何工作的
原文Understanding How Graal Works - a Java JIT Compiler Written in Java,讲了jvmci和ideal graph的基本概念以及一些优化 ...
- Codeforces Round #626 D. Present
D. Present 题目大意:给你一个大小是n的序列,求两两之间相加进行异或之后的答案. 这个题目我并没有想到怎么写,有点偷懒于是就去看了题解.. 题解很套路... 题解: 因为这个是用到了异或,所 ...
- C. Coffee Break 贪心 思维 有点难 有意思
C. Coffee Break 这个贪心之前好像写过,还是感觉挺难的,有点不会写. 这个题目大意是:给你一个数列n个元素,然后给你一天的时间,给你一个间隔时间d, 问你最少要用多少天可以把这个数列的所 ...
- Qt插件系统
说明 近期入职新公司,新公司的项目用到了Qt的插件系统,花时间了解了一下,还以为Qt的插件系统有多么高级呢,原来归根到底还是 dll 的动态调用时获取其中的类那一招啊,原理和之前的文章<DLL的 ...
- QML文字灰飞烟灭效果
QML文字灰飞烟灭效果 1,目的 实现文字化作一缕青烟随风而逝的效果. 2,设计分析 在前面的章节中讲述了如何化作光斑碎片逐渐消失的效果,我们可以借鉴它将光斑换成烟雾,再加入端流产生微风浮动,加上字幕 ...
- 【基础】excel如何根据数据内容显示不同颜色。
需求: 店柜完成率排名相比上阶段升降,升显示绿色“↑“,降显示红色“↓”,持平显示黑色“-”. 步骤: 第一步 先计算两次排名的差值(本次排名-上次排名). 第二步 对差值列设置单元格格式,设置格式如 ...