css预加载

来源：互联网发布：c语言判断水仙花数程序编辑：程序博客网时间：2024/06/03 17:03

1、预备素材：

2、html元素：

<div class="mask-loading" id="js-mask-loading" style="">    <div class="new-loading">  请稍侯.. </div>    <!-- <div class="css-loading"><p></p></div> --></div>

3、css样式：

.mask-loading {    width: 100%;    min-height: 100%;    text-align: center;    top: 0;    bottom: 0;    position: fixed;    opacity: 0.8;    z-index: 100;}.new-loading {    width: 3rem;    height: 3.6rem;    box-sizing: border-box;    background: rgba(0, 0, 0, 0.6);    overflow: hidden;    border-radius: 5px;    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);    padding-top: 2.7rem;    line-height: 0.9rem;    text-align: center;    color: #fff;    font-size: 0.6rem;}.new-loading:before {    position: absolute;    display: block;    content: "";    width: 100%;    height: 2.7rem;    left: 0;    top: 0;    background: url() no-repeat center center;    background-size: 100%;    animation: load 1s linear infinite;    -webkit-animation: load 1s linear infinite;}@keyframes load {    0%{        transform:rotate(0deg);    }    50%{        transform:rotate(180deg);    }    100%{        transform:rotate(360deg);    }}@-webkit-keyframes load{    0%{        transform:rotate(0deg);    }    50%{        transform:rotate(180deg);    }    100%{        transform:rotate(360deg);    }}

4、相应的加载完成以后，隐藏该元素，适当的时候增加模板背景。

阅读全文

0 0