css实现的loading动画

第一种：

<!DOCTYPE html>
<html>
<head>
<title>loading</title>
<style type="text/css">
.loadingTip {
position: fixed;
top:50%;
left: 50%;
-webkit-transform:translate3d(-50%,-50%,0);
z-index: 10001;
}
.loadingTip div {
background-color: #000;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@-webkit-keyframes loading {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.loadingTip > div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: loading 1s 0s infinite linear;
animation: loading 1s 0s infinite linear;
}
.loadingTip > div:nth-child(2) {
top: 17.04545px;
left: 17.04545px;
-webkit-animation: loading 1s 0.12s infinite linear;
animation: loading 1s 0.12s infinite linear;
}
.loadingTip > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: loading 1s 0.24s infinite linear;
animation: loading 1s 0.24s infinite linear;
}
.loadingTip > div:nth-child(4) {
top: -17.04545px;
left: 17.04545px;
-webkit-animation: loading 1s 0.36s infinite linear;
animation: loading 1s 0.36s infinite linear;
}
.loadingTip > div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: loading 1s 0.48s infinite linear;
animation: loading 1s 0.48s infinite linear;
}
.loadingTip > div:nth-child(6) {
top: -17.04545px;
left: -17.04545px;
-webkit-animation: loading 1s 0.6s infinite linear;
animation: loading 1s 0.6s infinite linear;
}
.loadingTip > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: loading 1s 0.72s infinite linear;
animation: loading 1s 0.72s infinite linear;
}
.loadingTip > div:nth-child(8) {
top: 17.04545px;
left: -17.04545px;
-webkit-animation: loading 1s 0.84s infinite linear;
animation: loading 1s 0.84s infinite linear;
}

</style>
</head>
<body>
<div class="loadingTip">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

第二种：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loading</title>
<style type="text/css">
.loading {
position: fixed;
top:50%;
left: 50%;
-webkit-transform:translate3d(-50%,-50%,0);
z-index: 10001;
}
.loading > div {
background-color: #0091ff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}
.loading > div:nth-child(1) {
-webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.loading > div:nth-child(2) {
-webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.loading > div:nth-child(3) {
-webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
}
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="loading">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

时间： 2024-10-12 08:40:40

css实现的loading动画的相关文章

用svg制作loading动画

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标       ystart:渐变开始点y坐标       xEnd:渐变结束点x坐标       yEnd:渐变结束点y坐标 这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi

利用css3的animation实现点点点loading动画效果（二）

box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及class类名: 订单提交中<span class="dotting"></span> css代码 .dotting { display: inline-block; min-width: 2px; min-height: 2px; box-shadow: 2px 0 c

css3实现简易loading动画

css3已经火的不行,我还很淡(dan)定(teng)地在啃着css2,表示很惭愧啊 周末抽点时间看了下loading效果的实现,开始看到css3有点头大,感觉是不是向外面说的那样每一次标准的发布都像是在学习一门新语言呢,称有些惶恐... 说完废话了....开始show代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

CSS3学习记录之loading动画

loading动画就是在加载一些网页内容的时候呈现出来的小动画,记录一下学到的几种loading动画: 效果:http://1.huizit1.applinzi.com/CSS/Loading/loading.html 第一个是一个圆形的一部分在旋转,实现原理: 在相应的位置添加一个 i 标签,然后设置width和height(值一样),然后添加border-radius:50%,此时这个i标签呈现出来的是一个圆,为了和图示效果一样,需要把这个圆遮住多半个,用background: linear

css3 loading动画练习

以下为css3制作的loading动画. HTML为: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>css3加载动画</title> 6 <link rel="stylesheet" t

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht

带缺口的圆环CSS3 Loading动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS 实现加载动画之五-光盘旋转

原文:CSS 实现加载动画之五-光盘旋转 今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键点在于如何将元素拼凑成风车形状.然后定义动画的关键帧为rotate 360度,应用于整个元素上,就可以使整个元素旋转起来.案例在请在chrome中查看. 1. 先看截图 2. 代码实现思路 2.1 首先还是定义四个元素,元素的中心为这四个元素组成的圆的圆心.

CSS 实现加载动画之四-圆点旋转

原文:CSS 实现加载动画之四-圆点旋转 圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以实现.这个实现也比较简单. 1. 动画截图 2. 案例源代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html