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中最重要的概念之一,接口可以理解为一个特殊的类, 里面由全局常量和公共的抽象方法组成,接口摆脱 ...
- JAVA-Runnable、Callable、FutureTask
通常,创建线程的执行单元有两种,一种是直接继承 Thread,另外一种就是实现 Runnable 接口. 但这两种都有一个问题就是无法有返回值,且子线程在执行过程中无法抛出异常.想线程有返回值,可以使 ...
- vuex里面的store架构
将store文件夹分为四个文件夹,分别是actions,getters,mutations,state. action:和mutatation功能是类似的,都是修改state里面的数据,区别是acti ...
- 等式变换java解法
输入一个正整数X,在下面的等式左边的数字之间添加+号或者-号,使得等式成立. 1 2 3 4 5 6 7 8 9 = X 比如: 12-34+5-67+89 = 5 1+23+4-5+6-7-8-9 ...
- 解决打开AS多次提示Untrusted Server's certificate问题
解决方法如下: 打开Studio左上角的file—>Setting-->Tools-->Server Certificates ->最后勾上 Accept non-truste ...
- python调用不同目录中类的终极方法
1.在需要导入别的类包中加入这两行代码 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))sys.path.a ...
- Python学习之==>面向对象编程（二）
一.类的特殊成员 我们在Python学习之==>面向对象编程(一)中已经介绍过了构造方法和析构方法,构造方法是在实例化时自动执行的方法,而析构方法是在实例被销毁的时候被执行,Python类成员中 ...
- c++ 指针（二）
指针 (4)指针数组 #include <iostream> using namespace std; ; int main () { , , }; ; i < MAX; i++) ...
- 一文搞懂HTTP和HTTPS协议
1.什么是协议? 网络协议是计算机之间为了实现网络通信而达成的一种"约定"或者"规则",有了这种"约定",不同厂商的生产设备,以及不同操作系 ...
- kettle学习资料
1.kettle资源丰富:kettle中文网 http://www.kettle.net.cn/category/use?tdsourcetag=s_pctim_aiomsg