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加载动画,一种是声波形状的动画,另一 ...
随机推荐
- LeetCode 92. 反转链表 II（Reverse Linked List II）
题目描述 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, ...
- EBS 页面影藏“个性化页”
以R12.1.3为例 影藏“个性化页”的方法: 修改配置文件: 个性化自助定义 值 由“是”改成“否” 注:修改之后需要清一下高速缓存,如果要显示“个性化页”则做相反配置 修改前: 修改 ...
- oracle delete 数据恢复
/*1.FLASHBACK QUERY*/ --闪回到15分钟前 select * from orders as of timestamp (systimestamp - interval ''1 ...
- defineProperty
### Object.defineProperty() https://segmentfault.com/a/1190000007434923方法会直接在一个对象上定义一个新属性,或者修改一个已经存在 ...
- 转 实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化（三）
这是本系列的最后一篇,主要是select_related() 和 prefetch_related() 的最佳实践. 第一篇在这里 讲例子和select_related() 第二篇在这里 讲prefe ...
- leetcode 137单词接龙
直接层序遍历,结果有部分测试样例超时: class Solution { public: int ladderLength(string beginWord, string endWord, vect ...
- [flask]jinjia2处理表单-实现搜索界面
思路: 通过flask-wtf创建forms表单类 在app.py中创建search_name()视图函数,实例化form表单类,将通过render_template将form传给html模板 创建h ...
- Oracle中生成随机数的函数
在Oracle中的DBMS_RANDOM程序包中封装了一些生成随机数和随机字符串的函数,其中常用的有以下两个: DBMS_RANDOM.VALUE函数 该函数用来产生一个随机数,有两种用法: 1. 产 ...
- USACO1.5 Mother's Milk【搜索】
题目传送门 这道题还记得是我当年学广搜的时候做过. 如今再做,做了一个$dfs$版本的,比较简单,直接搞就可以了. 广搜的话,用结构体保存,然后塞到$queue$里面就可以了. /* ID: Star ...
- USACO1.6 Superprime Rib
题目传送门 每一个特殊质数都会被从右边切掉,所以除了首位外的其它位数一定都不会是偶数,只能是$1$,$3$,$5$,$7$,$9$ 而每一个特殊质数的首位一定是质数,也就是$2$,$3$,$5$,$7 ...