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加载动画,一种是声波形状的动画,另一 ...
随机推荐
- JavaWeb之上传与下载
文件上传概述: 1,文件上传对页面的要求: 必须使用表单,而不能是超链接 表单的method必须是post 表单的enctype必须是multipart/form-data 在表单中添加file表单字 ...
- 桥接模式下，主机能ping通虚拟机，虚拟机ping不通主机
好像是防火墙阻止了什么东西而导致的无法ping通! 1.打开WIN7防火墙 2.选择高级设置 3.入站规则 4.找到配置文件类型为“公用”的“文件和打印共享(回显请求 – ICMPv4-In)”规则, ...
- ActiveMQ配置文档
本文介绍一对一.一对多.持久化.非持久化消息配置方式 一.创建项目 导入jar 二.创建MQ.xml <!-- 配置JMS连接工厂 --> <bean id="connec ...
- 读取位置 0xcccccccc 时发生访问冲突
XXXXX.exe 中的 0x1004eec2 处有未经处理的异常: 0xC0000005: 读取位置 0xcccccccc 时发生访问冲突 DEBUG模式下总是出现此错误,改为Release模式,错 ...
- 浏览器端-W3School-JavaScript：JavaScript RegExp 对象
ylbtech-浏览器端-W3School-JavaScript:JavaScript RegExp 对象 1.返回顶部 1. JavaScript RegExp 对象 RegExp 对象 RegEx ...
- 关系代数（Relation Algebra）与SQL语句的对应关系
SQL语句的执行一般是先翻译为关系代数再被执行的(能有效提高执行速度),所以我们有必要 了解关系代数与SQL语句间的对应关系. 就像高中代数由+-*/和数字组成,关系代数是由union.interse ...
- GO开发：链表
链表 type Student struct { Name string Next* Student } 每个节点包含下一个节点的地址,这样把所有的节点串起来了,通常把链表中的第一个节点叫做链表头 p ...
- 【HANA系列】SAP HANA SLT在表中隐藏字段并传入HANA的方法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SLT在表中隐 ...
- Kaggle试水之泰坦尼克灾难
比赛地址:https://www.kaggle.com/c/titanic 再次想吐槽CSDN,编辑界面经常卡死,各种按钮不能点,注释的颜色不能改,很难看清.写了很多卡死要崩溃. 我也是第一次参加这个 ...
- sklearn.preprocessing.StandardScaler数据标准化
原文链接:https://blog.csdn.net/weixin_39175124/article/details/79463993 数据在前处理的时候,经常会涉及到数据标准化.将现有的数据通过某种 ...