Css3实现常用的几种loading动画
css实现loading动画非常方便，也非常实用
第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading1{
width:50px;
height:40px;
margin:60px auto;
text-align:center;
}
.loading1 span{
width:5px;
height:100%;
display:inline-block;
background:#67CF22;;
animation: mymove 1.2s infinite ease-in-out;
-webkit-animation:mymove 1.2s infinite ease-in-out;
/*
mymove代表动画名字
1.2s代表执行时间
infinite表示一直循环执行
ease-in-out表示先慢后快的缓动
*/
}
.loading1 >span:nth-child(2){
-webkit-animation-delay:-1.0s;
animation-delay:-1.0s;
}
.loading1 >span:nth-child(3){
-webkit-animation-delay:-0.9s;
animation-delay:-0.9s;
}
.loading1 >span:nth-child(4){
-webkit-animation-delay:-0.8s;
animation-delay:-0.8s;
}
.loading1 >span:nth-child(5){
-webkit-animation-delay:-0.7s;
animation-delay:-0.7s;
}
@keyframes mymove{
0%{transform:scaleY(0.4);}
25%{transform:scaleY(1.0);}
50%{transform:scaleY(0.4);}
75%{transform:scaleY(0.4);}
100%{transform:scaleY(0.4);}
}
@-webkit-keyframes mymove{
0%{transform:scaleY(0.4);}
25%{transform:scaleY(1.0);}
50%{transform:scaleY(0.4);}
75%{transform:scaleY(0.4);}
100%{transform:scaleY(0.4);}
}
</style>
</head>
<body>
<div class="loading1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> </body>
</html>
第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading2{
width:50px;
height:50px;
margin:50px auto;
position:relative;
}
.bounce{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.bounce2{
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@keyframes bounce{
0%{transform:scale(0.0);}
50%{transform:scale(1.0);}
100%{transform:scale(0.0);}
}
@-webkit-keyframes bounce{
0%{transform:scale(0.0);}
50%{transform:scale(1.0);}
100%{transform:scale(0.0);}
}
</style>
</head>
<body>
<div class="loading2">
<div class="bounce bounce1"></div>
<div class="bounce bounce2"></div>
</div> </body>
</html>
第三种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading3{
width:30px;
height:30px;
margin:50px auto;
position:relative;
}
.circle{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.circle span{
width:8px;
height:8px;
display:inline-block;
background:#67CF22;
border-radius: 100%;
position:absolute;
-webkit-animation: mycircle 1.2s infinite ease-in-out;
animation: mycircle 1.2s infinite ease-in-out;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
}
.circle2{
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.circle3{
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle>span:nth-child(1){
top:0;
left:0;
}
.circle>span:nth-child(2){
top:0;
right:0;
}
.circle>span:nth-child(3){
right:0;
bottom:0;
}
.circle>span:nth-child(4){
left:0;
bottom:0;
}
.circle2 >span:nth-child(1){
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.circle3 >span:nth-child(1){
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.circle1 >span:nth-child(2){
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.circle2 >span:nth-child(2){
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.circle3 >span:nth-child(2){
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.circle1 >span:nth-child(3){
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.circle2 >span:nth-child(3){
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.circle3 >span:nth-child(3){
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.circle1 >span:nth-child(4){
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.circle2 >span:nth-child(4){
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.circle3 >span:nth-child(4){
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes mycircle{
0%{transform:scale(0.0);}
40%{transform:scale(1.0);}
80%{transform:scale(0.0);}
100%{transform:scale(0.0);}
}
@keyframes mycircle{
0%{transform:scale(0.0);}
40%{transform:scale(1.0);}
80%{transform:scale(0.0);}
100%{transform:scale(0.0);}
} </style>
</head>
<body>
<div class="loading3">
<div class="circle circle1">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="circle circle2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="circle circle3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div> </body>
</html>
第四种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading4{
width:150px;
margin:50px auto;
text-align: center;
}
.loading4 >div{
width: 18px;
height: 18px;
border-radius: 100%;
display:inline-block;
background-color: #67CF22;
-webkit-animation: three 1.4s infinite ease-in-out;
animation: three 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.loading4 .three1{
-webkit-animation-delay: -0.30s;
animation-delay: -0.30s;
}
.loading4 .three2{
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
}
@-webkit-keyframes three {
0%, 80%, 100% {-webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes three {
0%, 80%, 100% {-webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="loading4">
<div class="three1"></div>
<div class="three2"></div>
<div class="three3"></div>
</div> </body>
</html>
Css3实现常用的几种loading动画的更多相关文章
- CSS实现四种loading动画效果
四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- css3实现的三种loading动画（转载）
收藏了: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
- 10种CSS3实现的loading动画，挑一个走吧？
这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
- 【常见】CSS3进度条Loading动画
现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
随机推荐
- sap 最新财报以及云业务转型情况
SAP第四季度收入超预期 加码云转型启动重组计划 http://soft.zhiding.cn/software_zone/2019/0130/3115457.shtml 尽管第四季度超出收入预期,但 ...
- Wireshark协议分析工具应用
一.Wireshark简介与安装 Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用W ...
- WPF将数据库和GridView绑定并更改GridView模板
首先来看一下如何使用GridView,在前台的话代码如下:这里仅仅举出一个例子,GridView是作为子项嵌套在ListView中的,这里的数据源是通过绑定的方式来绑定到GridView中的. < ...
- Java微信二次开发（三）
各种类型消息的封装 第一步:找到com.wtz.message.response包,新建类Image.java package com.wtz.message.response; /** * @aut ...
- python之pygal：掷一个骰子统计次数并以直方图形式显示
源码如下: # pygal包:生成可缩放的矢量图形文件,可自适应不同尺寸的屏幕显示 # 安装:python -m pip intall pygal-2.4.0-py2.py3-none-any.whl ...
- python之使用smtplib模块发送邮件
# 使用smtplib模块发送邮件 import smtplib from email.mime.text import MIMEText from email.header import Heade ...
- JavaScript限制前端页面用户表单输入
onkeyup事件 onkeyup 事件会在键盘按键被松开时发生. 内容来源:自成e家 1.只能输入数字 <input onkeyup = "value=value.replace(/ ...
- 斜率DP个人理解
斜率DP 斜率DP的一版模式:给你一个序列,至多或分成m段,每段有花费和限制,问符合情况的最小花费是多少: 一版都用到sum[],所以符合单调,然后就可以用斜率优化了,很模板的东西: 如果看不懂可以先 ...
- JSP 和 Servlet 的工作原理和生命周期
JSP的英文名叫Java Server Pages,翻译为中文是Java服务器页面的意思,其底层就是一个简化的Servlet设计,是由sum公司主导参与建立的一种动态网页技术标准.Servlet 就是 ...
- bzoj 3289 : Mato的文件管理 (莫队+树状数组）
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3289 思路: 求区间最小交换的次数将区间变成一个不降序列其实就是求区间逆序对的数量,这 ...