css3 加载动画
代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} html,
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #333;
} .loading {
position: relative;
margin: 50px;
width: 200px;
height: 200px;
text-align: center;
} .loading1 .text {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -80px;
width: 160px;
height: 160px;
line-height: 160px;
font-size: 30px;
color: #fff;
} .loading1 .text {
animation: text1 2.5s ease-in-out infinite;
} .loading1 .box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -80px;
width: 160px;
height: 160px;
background-color: #fff;
animation: changeShape 2.5s ease-in-out infinite;
} @keyframes changeShape {
0% {
border-radius: 0%;
background-color: pink;
transform: scale(1) rotate(0deg);
} 50% {
border-radius: 50%;
background-color: skyblue;
transform: scale(0.5) rotate(360deg);
} 100% {
border-radius: 0%;
background-color: pink;
transform: scale(1) rotate(0deg);
}
} @keyframes text1 {
0% {
transform: scale(1);
} 50% {
transform: scale(0.5);
} 100% {
transform: scale(1);
}
} .loading2 {
text-align: center;
} .loading2 .text {
position: absolute;
width: 100%;
z-index: 10;
top: 0;
left: 0;
line-height: 200px;
font-size: 30px;
font-weight: bold;
color: #333;
text-align: center;
}
.loading2 .text span{
display: inline-block;
animation: word 1.6s ease-in-out infinite;
}
.loading2 .text span:nth-child(2n){
animation-delay: 0s;
}
.loading2 .text span:nth-child(2n-1){
animation-delay: 0.4s;
} .loading2 .box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fff;
transform: rotate(45deg);
} .loading2 .box span {
position: absolute;
display: inline-block;
width: 5px;
height: 100%;
background-color: red;
} .loading2 .box span:nth-child(1) {
top: 5px;
left: 0;
transform-origin: top left;
transform: rotate(-90deg);
background-color: #000;
animation: changeT 1.5s ease-in-out infinite; } .loading2 .box span:nth-child(2) {
top: 0;
right: 0;
background-color: blue;
animation: changeR 1.5s ease-in-out infinite; } .loading2 .box span:nth-child(3) {
bottom: 5px;
right: 0;
transform-origin: bottom right;
transform: rotate(-90deg);
background-color: #172;
animation: changeB 1.5s ease-in-out infinite; } .loading2 .box span:nth-child(4) {
top: 0;
left: 0;
background-color: purple;
animation: changeL 1.5s ease-in-out infinite; } @keyframes changeT {
0% {
left: 200px;
} 50% {
left: 0px;
} 100% {
left: -200px;
} } @keyframes changeR {
0% {
top: 200px;
} 50% {
top: 0px;
} 100% {
top: -200px;
}
} @keyframes changeB {
0% {
right: 200px;
} 50% {
right: 0px;
} 100% {
right: -200px;
}
} @keyframes changeL {
0% {
top: -200px;
} 50% {
top: 0px;
} 100% {
top: 200px;
}
} @keyframes word{
0%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}
</style>
</head> <body>
<div class="loading loading1">
<div class="text">loading</div>
<div class="box"></div>
</div>
<div class="loading loading2">
<div class="text">
<span>l</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body> </html>
细节点：居中与缩放实现属性不能同时使用 transform 字体大小缩放效果 font-size 不如 scale
重点代码：
css3 加载动画的更多相关文章
- 纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- CSS3加载动画
图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图: 图2 代码: 使用1个名为'l ...
- javascript,css3加载动画
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- css3 加载动画效果
Loading 动画效果一 HTML 代码: <div class="spinner"> <div class="rect1&quo ...
- 炫酷CSS3加载动画
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8&qu ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
随机推荐
- Java缓存技术有哪些
我们用ehcache在本地,分布式用redis和memcache,各有各的好处,现在企业都是应用很多种中间件供俺们码农选择.
- Centos6 源码安装mysql5.6
这里介绍如何使用centos6.*来安装mysql5.6版本. 先做一下准备工作 确定好用于运行mysql的用户,安全起见,建议拒绝次用户登录,仅用于运行程序. useradd mysql -s/sb ...
- SQL Server AlwaysOn原理简介
SQL Server2012所支持的AlwaysOn技术集中了故障转移群集.数据库镜像和日志传送三者的优点,但又不相同.故障转移群集的单位是SQL实例,数据库镜像和日志传送的单位是单个用户数据库,而A ...
- html 绘图
<html> <head> <title>canvas绘制图形</title> <style> body{ margin: 0px; pad ...
- python-静态方法和类方法及其使用场景
静态方法和类方法 静态方法 我们在类中定义的方法都是对象方法,也就是说这些方法都是发送给对象的消息.实际上,我们写在类中的方法并不需要都是对象方法,例如我们定义一个"三角形"类,通 ...
- 【flask】flask项目配置 app.config
[理论] 在很多情况下,你需要设置程序的某些行为,这时你就需要使用配置变量.在Flask中,配置变量就是一些大写形式的Python变量, 你也可以称之为配置参数或配置键.使用统一的配置变量可以避免在程 ...
- emqtt 系统主题
$SYS-系统主题 EMQ 消息服务器周期性发布自身运行状态.MQTT 协议统计.客户端上下线状态到 $SYS/ 开头系统主题. $SYS 主题路径以 “$SYS/brokers/{node}/” 开 ...
- svn版本合并
假如你的项目(这里指的是手机客户端项目)的某个版本(例如1.0版本)已经完成开发.测试并已经上线了,接下来接到新的需求,新需求的开发需要修改多个文件中的代码,当需求已经开始开发一段时间的时候,突然接到 ...
- caffe-----使用C++ 提取网络中间层特征数据
最近实验,想要在c++下知道网络中间某一层的特征数据情况,查找了相关资料,记录一下. 其实在caffe框架里面是包含这种操作的,可以模仿tools/extract_features.cpp中的操作来得 ...
- UniEAP V4 开发实践说明文档
一.开发环境搭建 1. 前期准备 Java jdk1.6 ,Oralce数据库,plsql客户端,tomcat6.0,开发样例数据库脚本,unieap脚本,unieap工程,unieap worksh ...