您的位置：首页 > 其它

网页蒙层实现加载效果

2017-12-08 16:37 253 查看

最近做移动应用的一个商城项目，需要实现一个全屏蒙层显示加载效果，记录下来，以免以后用的着，，效果图：

直接上代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 </title>
<style>
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* 1s表示图片旋转一圈的时间，**/
.Rotation {
position: absolute;
left: 30px;
top: 15px;
width: 70px;
height: 70px;
color: #F00;
-webkit-transform: rotate(360deg);
animation: rotation 1s linear infinite;
-moz-animation: rotation 1s linear infinite;
-webkit-animation: rotation 1s linear infinite;
-o-animation: rotation 1s linear infinite;
}
/**图片的圆角*/
.img {
border-radius: 70px;
}
/**opacity 透明度**/
.div-a {
position: absolute;
top: 0;
bottom: 0;;
width: 100%;
height: 100%;
filter: alpha(Opacity=60);
-moz-opacity: 0.6;
opacity: 0.6,;
background: #CCCCCC;
}
.img-div{
position: relative;
top: 40%;
margin: 0 auto;
width: 300px;
height: 100px;
background: #FFFFFF;
text-align: center;
border: 1px #E8E8E8 solid;
}
.loading{
display: inline-block;
font-size: 28px;
margin-left:40px ;
line-height: 28px;
margin-top: 36px;
}

</style>
</head>

<body>
<!--
使用的时候先让下面的这个div隐藏，到需要的时候用js让他显示出来就行了
-->
<div class="div-a">
<div class="img-div">
<img class="Rotation img" src="loading.png" width="500" height="500" /><span class="loading">加载中...</span>
</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航