发光加载环动画-纯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:变形:是一个静态属性,可以 ...
随机推荐
- [USACO1.5]回文质数 Prime Palindromes
题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,000 ...
- python（面向对象-类封装调用）
一.面对对象思想 (1)大家肯定听过 Python 中”一切皆对象“的说法,但可能并不了解它的具体含义,只是在学习的时候听说 Python 是面向对象的编程语言,本节将向大家详细介绍 Python 面 ...
- CentOS启用iptables防火墙
centos 7默认的防火墙使用firewall,系统服务管理方式也变更了,可以通过systemctl命令控制. 可以参考这个链接 但是习惯用iptables,可以按下面的操作改下 1.关闭firew ...
- 解决虚拟机中linux系统无法使用本机无线wifi联网的问题
VMware Workstation 在嵌入式开发中经常会遇到,但是显示大多数人使用开发环境是Win10 + 无线网卡,针对这种情况,需要配置虚拟机的上网环境使用的是NAT模式,将配置过程进行描述: ...
- flink入门学习
Flink学习笔记 一.简介 1.定义: 针对流数据和批数据的分布式处理引擎.它主要是由 Java 代码实现.. 2.应用场景: 流数据:把所有任务当成流来处理,处理观察和分析连续事件产生的数 ...
- AndroidStudio3.6升级后的坑-apk打包
前段时间尝试了最新版的AndroidStudio3.6,整体来说gradle调试和自带的虚拟机相比较历史版本有了更香的体验. 刚好有个新项目,就直接使用最新版了,这次新版的升级除了保持原有的界面风格, ...
- Mysql 常用函数（12）- left 函数
Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html left 的作用 返回字符串 str 中最左边的 ...
- 散列表PTA判断
1-1 在散列表中,所谓同义词就是具有相同散列地址的两个元素. (1分) T F 作者 DS课程组 单位 浙江大学 1-2 采用平方探测冲突解决策略(hi(k)=(H(k)+ ...
- 如何使用 Shebang Line (Python 虚拟环境)
本文记录,如何在 Python Script 中使用 Shebang 行. Shebang Line 是什么: 也被叫做 Hashbang Line,只要是一个由,井号和叹号#!开头,并构成的字符序列 ...
- Hadoop 集群搭建和维护文档
一.前言 -- 基础环境准备 节点名称 IP NN DN JNN ZKFC ZK RM NM Master Worker master1 192.168.8.106 * * * * * * maste ...