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加载动画,一种是声波形状的动画,另一 ...
随机推荐
- Boost学习
使用boost function使用类成员函数作为回调函数 #include <iostream> #include <boost/function.hpp> struct M ...
- 第十一组 Beta版本演示
第11组 Beta版本演示 组长博客链接 https://www.cnblogs.com/xxylac/p/12039948.html 本组成员(不知道叫什么团队) 031702635 陈郑铧(组长) ...
- 五一 DAY 7
五一 DAY 7 P1514 引水入城 P1311 选择客栈 题解: P1315 观光公交 题解: 设 wait i 为最晚到达的旅客 arrive i 为到达i 的时刻 arrive i =max ...
- 【转】数组指针&指针数组
转自:https://www.cnblogs.com/mq0036/p/3382732.html 数组指针和指针数组的区别 数组指针(也称行指针)定义 int (*p)[n];()优先级高,首先说明p ...
- 阶段3 2.Spring_10.Spring中事务控制_6 spring基于XML的声明式事务控制-配置步骤
环境搭建 新建工程 把对应的依赖复制过来 src下内容复制 配置spring中的声明事物 找到bean.xml开始配置 配置事物管理器 里面需要注入DataSource 2-配置事物通知 需要先导入事 ...
- 新增存储用Parted分区并建LVM卷
新增存储用Parted分区并建LVM卷 一,Parted分区 1,parted分区 www.ahlinux.com # parted /dev/sda GNU Parted 2.1 使用 /dev/ ...
- freetype HarfBuzz fontconfig Cairo 编译顺序
There is also a circular dependency between freetype and HarfBuzz. Note that fontconfig and Cario ar ...
- SSM项目——乐淘商城话述1.0
乐淘商城 项目介绍 淘淘网上商城是一个综合性的B2C平台,类似京东商城.天猫商城.会员可以在商城浏览商品.下订单,以及参加各种活动.管理员.运营可以在平台后台管理系统中管理商品.订单.会员等.客服可以 ...
- PEP8-python编码规范(下)
1.结尾逗号 结尾的逗号通常是可选的,除了在构成一个元素的元组时是强制性需要的(在Python 2 中,它们对 print 语句有语义).为了清晰起见,建议将后者用括号括起来(在技术上是多余的). Y ...
- vue ----》实现打印功能
1.安装打印相关依赖 cnpm install vue-print-nb --save 2.安装后,在main.js文件中引入 import Print from 'vue-print-nb' Vue ...