1、html代码如下。
<div class="loading-mask"></div>
<div id="loadingBox" class="loading-content">
<div class="mask"></div>
<div class="x-loading-spinner">
<span class="x-loading-top"></span>
<span class="x-loading-left"></span>
<span class="x-loading-bottom"></span>
<span class="x-loading-right"></span>
</div>
<span class="txt">正在加载...</span>
</div>
2、css样式
.loading-mask{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #cccccc;
opacity: .5;
z-index: 100;
}
.loading-content{
position: fixed;
width: 150px;
height: 100px;
z-index: 110;
top: 28%;
left: 50%;
margin-left: -75px;
}
.loading-content .mask{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 50%;
margin-left: -50%;
background-color: #333;
border: 1px solid #333;
border-radius: 5px;
opacity: .3;
}
.loading-content span.txt{
font-size: 16px;
position: absolute;
bottom: 10px;
text-align: center;
width: 100%;
color: #555555;
}
.x-loading-spinner{
position: absolute;
top: 18%;
left: 50%;
margin-left: -20px;
}
.x-loading-spinner {
font-size: 270%;
height: 1em;
width: 1em;
-webkit-transform-origin: 0.5em 0.5em;
-moz-transform-origin: 0.5em 0.5em;
-ms-transform-origin: 0.5em 0.5em;
}
.x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after {
display: block;
position: absolute;
width: 0.1em;
height: 0.25em;
top: 0;
transform-origin: 0.05em 0.5em;
-webkit-transform-origin: 0.05em 0.5em;
-moz-transform-origin: 0.05em 0.5em;
-ms-transform-origin: 0.05em 0.5em;
-webkit-border-radius: 0.05em;
-moz-border-radius: 0.05em;
-ms-border-radius: 0.05em;
border-radius: 0.05em;
content: " ";
}
.x-loading-spinner > span.x-loading-top {
background-color: rgba(96, 96, 96, 0.99);
}
.x-loading-spinner > span.x-loading-top::after {
background-color: rgba(96, 96, 96, 0.9);
}
.x-loading-spinner > span.x-loading-left::before {
background-color: rgba(96, 96, 96, 0.8);
}
.x-loading-spinner > span.x-loading-left {
background-color: rgba(96, 96, 96, 0.7);
}
.x-loading-spinner > span.x-loading-left::after {
background-color: rgba(96, 96, 96, 0.6);
}
.x-loading-spinner > span.x-loading-bottom::before {
background-color: rgba(96, 96, 96, 0.5);
}
.x-loading-spinner > span.x-loading-bottom {
background-color: rgba(96, 96, 96, 0.4);
}
.x-loading-spinner > span.x-loading-bottom::after {
background-color: rgba(96, 96, 96, 0.35);
}
.x-loading-spinner > span.x-loading-right::before {
background-color: rgba(96, 96, 96, 0.3);
}
.x-loading-spinner > span.x-loading-right {
background-color: rgba(96, 96, 96, 0.25);
}
.x-loading-spinner > span.x-loading-right::after {
background-color: rgba(96, 96, 96, 0.2);
}
.x-loading-spinner > span.x-loading-top::before {
background-color: rgba(96, 96, 96, 0.15);
}
.x-loading-spinner > span {
left: 50%;
margin-left: -0.05em;
}
.x-loading-spinner > span.x-loading-top {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.x-loading-spinner > span.x-loading-right {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.x-loading-spinner > span.x-loading-bottom {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.x-loading-spinner > span.x-loading-left {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-mstransform: rotate(270deg);
transform: rotate(270deg);
}
.x-loading-spinner > span::before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.x-loading-spinner > span::after {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.x-loading-spinner {
animation: x-loading-spinner-rotate 1s infinite linear;
-webkit-animation: x-loading-spinner-rotate 1s infinite linear;
-moz-animation: x-loading-spinner-rotate 1s infinite linear;
-ms-animation: x-loading-spinner-rotate 1s infinite linear;
}
@keyframes x-loading-spinner-rotate {
from {
transform: rotate(30deg);
}
to {
transform: rotate(330deg);
}
}
@-webkit-keyframes x-loading-spinner-rotate {
from {
-webkit-transform: rotate(30deg);
}
to {
-webkit-transform: rotate(330deg);
}
}
@-moz-keyframes x-loading-spinner-rotate {
from {
-webkit-transform: rotate(30deg);
}
to {
-webkit-transform: rotate(330deg);
}
}
@-ms-keyframes x-loading-spinner-rotate {
from {
-webkit-transform: rotate(30deg);
}
to {
-webkit-transform: rotate(330deg);
}
}
分享到:
相关推荐
之前我们分享过很多漂亮的CSS3 Loading加载动画,印象最深的要算这款CSS3 Loading进度条加载动画特效 3款绚丽风格。这次要给大家介绍的是另外一款可爱的CSS3 Loading动画,一共有5种动画类型,每组Loading动画都非常...
5个可爱的CSS3 Loading加载动画,解压后即可查看 .
css3 Loading加载动画制作动态Loading阶梯加载动画 css3 Loading加载动画制作动态Loading阶梯加载动画
three-dots.css是一款三圆点CSS3 loading加载动画特效库。three-dots.css中集成了14种三园点loading动画特效,以及三种增强动画效果。
之前我们已经分享过很多基于jQuery和CSS3的Loading加载动画,比如最近刚分享的CSS3齿轮Loading加载动画,效果很不错。也有以前分享的5个可爱的CSS3 Loading加载动画。今天要分享的是非常炫酷的CSS3 Loading加载动画...
这是两款炫酷CSS3 Loading加载动画特效。该loading加载动画使用CSS3 animation来制作动画特效,可用于页面预加载时的动画效果。
CSS3 loading加载特效
CSS3 Loading加载动画的效果.zip
这是一组效果非常炫酷的纯CSS3 loading加载动画特效。这组loading动画共10种不同的效果,全部使用animation帧动画制作而成。这些特效代码简洁,效果炫酷,非常值得学习借鉴。
之前我们为大家分享过很多基于纯CSS3的Loading加载动画,你可以在10组蓝色风格的纯CSS3 Loading动画图标这篇文章中找到许多实用的CSS3 Loading动画。这次我们再给大家分享5组炫酷的纯CSS3 Loading加载动画,这些...
这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3 animation动画来制作,它代码简单,效果非常的炫酷。
之前我们为大家分享过很多款炫酷和实用的CSS3 Loading加载动画,比如这款CSS3实现的火柴燃烧Loading加载动画和5个可爱的CSS3 Loading加载动画。今天要分享的同样是一款基于纯CSS3的Loading加载动画,与其他Loading...
这是一款共2种炫酷效果的纯CSS3 loading加载动画特效。该CSS3加载动画分别为弹跳的小方块和月亮绕地球旋转的动画效果。它们使用的技术都是CSS animation来实现,效果非常的震撼。
还记得前段时间分享过的一款CSS3 Loading加载动画么,那是相当的...今天我们又要再分享4组欢乐的CSS3 Loading加载动画,这4款动画是同一种模式,都是一群小球在大球里面形成各种排列从而达到Loading加载动画的效果。
loaders.css是一款使用纯CSS3 Loading加载指示器特效。该loading指示器特效共有11种不同的效果,都是使用CSS3 animation动画来完成。
今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画更见简单,它主要由圆环形和柱形两种样式组成,可以将这些Loading图标应用...
5个可爱的CSS3 Loading加载动画,使用HTML5和CSS3、JavaScript写出的。若需要使用到自己的软件项目中,需要稍加修改,不修改可能会有冲突。
今天特意给大家推荐一款css3 loading加载效果 当然,他并不是纯css3的,抱歉标题可能会有些歧义,但是偶尔的一点点js也是可以忽略的啦 附件提供了28个不同的加载效果,你可以任选一种作为你的手机网页端...
一款十分创意炫酷的CSS3 Loading加载动画特效,由文字与图形组合而成的动画效果,真的非常不错,直接看演示吧。
纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip