CSS3实现1前端常用Loading效果
此页动画效果都是gif图的，不想用代码写的话，下载图片就可使用。
第1种效果：
代码如下
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}
第2种效果：
代码如下：
<div class="loading">
<span></span>
</div> .loading{
width: 150px;
height: 4px;
border-radius: 2px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightgreen;
-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
margin-top: -7px;
margin-left:-8px;
-webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes changePosition{
0%{
background: lightgreen;
}
100%{
margin-left: 142px;
background: lightblue;
}
}
第3-5种效果：
代码如下：
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
第3-5种效果的css样式分别为：
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity:;
}
100%{
opacity:;
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity:;
-webkit-transform: scale(1.3);
}
100%{
opacity: 0.2;
-webkit-transform: scale(.3);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
position: relative;
margin-top:100px;
}
.loading span{
position: absolute;
width: 15px;
height: 100%;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease-in infinite alternate;
}
@-webkit-keyframes load{
0%{
opacity:;
-webkit-transform: translate(0px);
}
100%{
opacity: 0.2;
-webkit-transform: translate(150px);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
第6-8种效果：
代码如下：
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
第6-8种效果的css样式分别为：
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity:;
}
100%{
opacity:;
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load 1s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity:;
}
100%{
opacity:;
-webkit-transform: rotate(90deg);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load 1s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity:;
-webkit-transform: scale(1);
}
100%{
opacity:;
-webkit-transform: rotate(90deg) scale(.3);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
第9-10种效果：
<div class="loadEffect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
opacity:;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left:;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top:;
margin-left: -8px;
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right:;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom:;
left: 50%;
margin-left: -8px;
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: scale(1.2);
opacity:;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loadEffect span:nth-child(1){
left:;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top:;
margin-left: -10px;
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right:;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom:;
left: 50%;
margin-left: -10px;
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
第11种效果：
代码为：
<div class="loading">
<span></span>
</div> .loading{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto;
margin-top:100px;
position: relative;
border:5px solid lightgreen;
-webkit-animation: turn 2s linear infinite;
}
.loading span{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -15px;
-webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes turn{
0%{
-webkit-transform: rotate(0deg);
border-color: lightgreen;
}
100%{
-webkit-transform: rotate(360deg);
border-color: lightblue;
}
}
第12种效果：
代码如下：
<div class="loading">
<span></span>
</div> .loading{
width: 150px;
height: 8px;
border-radius: 4px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightblue;
overflow: hidden;
}
.loading span{
display:block;
width: 100%;
height: 100%;
border-radius: 3px;
background: lightgreen;
-webkit-animation: changePosition 4s linear infinite;
}
@-webkit-keyframes changePosition{
0%{
-webkit-transform: translate(-150px);
}
50%{
-webkit-transform: translate(0);
}
100%{
-webkit-transform: translate(150px);
}
}
第13种效果：
代码如下：
<div class="loading">
<span></span>
</div> .loading{
width: 200px;
height: 60px;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.loading span{
width: 50px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
top: 50%;
margin-top: -15px;
overflow: hidden;
-webkit-animation: changePosition 2.08s linear infinite;
}
@-webkit-keyframes changePosition{
0%,100%{
-webkit-transform: translate(70px);
}
20%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(0px);
}
30%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(0px);
}
35%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(5px);
background: lightblue;
}
70%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(160px);
}
80%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(160px);
}
85%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(155px);
background: lightgreen;
} }
第14种效果：
<div class="loadEffect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> .loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 30px;
height: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
opacity:;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left:;
top: 50%;
margin-top:-5px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 10px;
top: 20px;
-webkit-transform: rotate(45deg);
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top: 10px;
margin-left: -15px;
-webkit-transform: rotate(90deg);
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 20px;
right:10px;
-webkit-transform: rotate(135deg);
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right:;
top: 50%;
margin-top:-5px;
-webkit-transform: rotate(180deg);
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 10px;
bottom:20px;
-webkit-transform: rotate(225deg);
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom: 10px;
left: 50%;
margin-left: -15px;
-webkit-transform: rotate(270deg);
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 20px;
left: 10px;
-webkit-transform: rotate(315deg);
-webkit-animation-delay:1.04s;
}
第15种效果：
<div class="loadEffect">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div> .loadEffect {
width: 100px;
height: 100px;
margin: 0 auto;
margin-top:100px;
position: relative;
}
.loadEffect div{
width: 100%;
height: 100%;
position: absolute;
-webkit-animation: load 2.08s linear infinite;
}
.loadEffect div span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
@-webkit-keyframes load{
0%{
-webkit-transform: rotate(0deg);
}
10%{
-webkit-transform: rotate(45deg);
}
50%{
opacity:;
-webkit-transform: rotate(160deg);
}
62%{
opacity:;
}
65%{
opacity:;
-webkit-transform: rotate(200deg);
}
90%{
-webkit-transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
} }
.loadEffect div:nth-child(1){
-webkit-animation-delay:0.2s;
}
.loadEffect div:nth-child(2){
-webkit-animation-delay:0.4s;
}
.loadEffect div:nth-child(3){
-webkit-animation-delay:0.6s;
}
.loadEffect div:nth-child(4){
-webkit-animation-delay:0.8s;
}
第16种效果：
<div class="loading">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div> .loading{
width: 60px;
height: 60px;
margin: 0 auto;
margin-top:100px;
position: relative;
-webkit-animation: load 3s linear infinite;
}
.loading div{
width: 100%;
height: 100%;
position: absolute;
}
.loading span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #99CC66;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
-webkit-animation: changeBgColor 3s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: rotate(0deg);
}
33.3%{
-webkit-transform: rotate(120deg);
}
66.6%{
-webkit-transform: rotate(240deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes changeBgColor{
0%,100%{
background: #99CC66;
}
33.3%{
background: #FFFF66;
}
66.6%{
background: #FF6666;
}
}
.loading div:nth-child(2){
-webkit-transform: rotate(120deg);
}
.loading div:nth-child(3){
-webkit-transform: rotate(240deg);
}
.loading div:nth-child(2) span{
-webkit-animation-delay: 1s;
}
.loading div:nth-child(3) span{
-webkit-animation-delay: 2s;
}
CSS3实现1前端常用Loading效果的更多相关文章
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 前端页面loading效果(CSS实现)
当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...
- CSS3饼状loading效果
概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...
- CSS3 loading效果全
梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
随机推荐
- windows环境下用pip安装pyautogui遇到的几个问题
1.不能直接使用win+r运行cmd并使用pip,必须点击开始->windows系统->命令提示符,右键->以管理员身份运行 2.运行pip install pyautogui后提示 ...
- Bootstrap关于表格
1.Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格. ☑ .table:基础表格 ☑ .table-striped:斑马线表格 ☑ .table-bordere ...
- opencv学习HighGUI图形用户界面初步【1】
HighGUI是图形用户界面模块.包括:1.输入与输出:2.视频捕捉:3.图形和视频的解码编码:4.图形交界面与接口. 由于opencv.hpp包含了core.objdetect.ingproc.ph ...
- Maven学习总结（26）——maven update时，报：Preference node "org.eclipse.wst.validation"...
详细情况如下: An internal error occurred during: "Updating Maven Project". Preference node " ...
- （8）. 使用JPA保存数据【从零开始学Spring Boot】
在看这一篇文档的话,需要先配置好JPA – Hibernate. 总体步骤: (1) 创建实体类Demo,如果已经存在,可以忽略. (2) 创建jpa repository类操作持久化. (3 ...
- confluence中设置应用程序链接到jira
有时需要在confluence中选中文本直接生成issue或story到jira里. 在"一般配置“->“应用程序链接”中创建即可.
- 【ACM】hdu_1004_Let the Balloon Rise
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- 楼控-西门子insight BBMD设置
BBMD设置的目的就是让两个不同网段的设备可以同时在一个系统中访问的操作. 比如你有两个bacnet的网络,但是一个是192.168.0.1-192.168.0.255的网段,另一个是10.0.0.1 ...
- 监控sql运行时剩余时间
--监控sql执行时剩余时间 你知道正在执行的sql大概须要多长时间么? 你知道正在执行的sql大概完毕了百分之几么? 你知道正在执行的sql大概还要多长时间完毕么? V$SESSION_LONGOP ...
- 0x58B 四边形不等式
bzoj1563: [NOI2009]诗人小G 还有优化二维区间DP的,形如f[i][j]min{f[i][k]+f[k][j+1]+val(i,j)} 其中val满足四边形不等式,而且对于任意a&l ...