博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3实现10种Loading效果
阅读量:5879 次
发布时间:2019-06-19

本文共 13245 字,大约阅读时间需要 44 分钟。

原文:

昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记……

第1种效果:

代码如下:

.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种效果:

代码如下:

.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种效果:

代码如下:

第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: 1; } 100%{
opacity: 0; } } .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: 1; -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: 1; -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种效果:

代码如下:

第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: 1; } 100%{
opacity: 0; } } .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: 1; } 100%{
opacity: 0; -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: 1; -webkit-transform: scale(1); } 100%{
opacity: 0; -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种效果:

代码如下:

CSS样式分别为:

.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: 1; } 100%{
opacity: 0.2; } } .loadEffect span:nth-child(1){
left: 0; 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: 0; 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: 0; 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: 0; 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: 1; } 100%{
-webkit-transform: scale(.3); opacity: 0.5; } } .loadEffect span:nth-child(1){
left: 0; 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: 0; 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: 0; 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: 0; left: 50%; margin-left: -10px; -webkit-animation-delay:0.91s; } .loadEffect span:nth-child(8){
bottom: 14px; left: 14px; -webkit-animation-delay:1.04s; }

 

PS:CSS样式代码其实很多重复,主要就是动画不一样,但为了方便以后直接拿来用,就先不整理了。

转载地址:http://hddix.baihongyu.com/

你可能感兴趣的文章
最短路径算法-Dijkstra算法的应用之单词转换(词梯问题)
查看>>
软链接和硬链接详解
查看>>
HTML5 video 视频标签 常用属性
查看>>
深入理解javascript对象系列第一篇——初识对象
查看>>
Redis_master-slave模式
查看>>
qemu安装
查看>>
多媒体开发之rtmp---rtmp client 端的实现
查看>>
3.使用Maven构建Web项目
查看>>
cisco 多生成树MST笔记
查看>>
C 到 C++ 的升级(一)
查看>>
彻底卸载删除微软Win10易升方法
查看>>
Ajaxload动态加载动画生成工具的实现(ajaxload的本地移植)
查看>>
SWT/JFACE之环境配置(一)
查看>>
手把手构建LAMP
查看>>
关于outlook 保存的.msg文件打开一次之后不能再次打开的问题
查看>>
CentOS 6.6安装python3.4.3后yum不能使用的解决办法
查看>>
应用程序日志中总是说MS DTC无法正确处理DC 升级/降级事件,是什么意思
查看>>
毕业了,爱情怎么办?
查看>>
关于django一个请求的生命周期
查看>>
Supervisor-容器中启动多个程序
查看>>