网站加载页面(HTML+CSS+JS,简易版)

一、概述

本张页面由我做的一个个人网站而来，静态页面，编码简单，希望对你有用。不喜勿喷，感谢。废话不多说，直接上图。(注：进度条可以参考参考！)

二、代码

HTML部分

网站小图标！

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="Refresh" content="5.5;URL=second.html">        <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon">        <link rel="stylesheet" href="./css/buffer.css" type="text/css">        <script src="./js/buffer.js">script>        <title>Buffertitle>head><body>    <div class="box">        <div class="head">            <img src="./img/buffer.png">                        <div class="shadow">                                <span>span>            div>            <div class="load">                <p>Loadingp>                                <span>span>                <span>span>                <span>span>            div>            <div class="bar">                                <span id="j">span>                <div id="num">0%div>            div>        div>    div>body>html>

css部分(buffer.css)

* {    margin: 0;    padding: 0;}/* 全局属性设置 */html {    width: 100%;    height: 100%;    background-color: rgba(255, 251, 45, 0.856);}/* 设置背景颜色 */.box {    width: 40%;    margin: auto;}/* 设置box的大小和位置 */.head {    width: 150px;    height: 150px;    margin: 200px auto;}.head img {    width: 100%;    position: relative;    top: 15px;    animation: tiao 2s infinite linear;    /* 对图片设置动画：animation: name 时间 无限循环 */}@keyframes tiao {    0% {        transform: translateY(-25px) scale(1.1);        /* 图片相较于原位置Y轴偏移量 scale为缩放属性 */    }    25% {        transform: translateY(0px) scale(1);    }    50% {        transform: translateY(25px) scale(0.9);    }    75% {        transform: translateY(0px) scale(1);    }    100% {        transform: translateY(-25px) scale(1.1);    }}.shadow {    width: 150px;    height: 11px;    margin: auto;    position: relative;    top: 30px;}.shadow span {    display: block;    width: 50%;    height: 62%;    margin: auto;    background: #9b9b9b3d;    border-radius: 50%;    animation: shadow 2s infinite linear;}/* 阴影的属性以及动画设置 */@keyframes shadow {    0% {        width: 52%;    }    25% {        width: 32%;    }    50% {        width: 12%;    }    75% {        width: 32%;    }    100% {        width: 52%;    }}.load {    display: block;    width: 150px;    line-height: 20px;    /* 行高 */    letter-spacing: 5px;    /* 字间距 */    border-radius: 18px;    /* 圆角设置 */    position: relative;    top: 70px;    margin: auto;    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;    font-weight: bold;    font-size: 17.5px;}.load p {    width: 95px;    animation: typing 1s steps(22), blink 2s infinite linear;    display: inline-block;    background-image: linear-gradient(to top right, rgb(27, 209, 255), rgb(236, 29, 255));    /* 渐变颜色，对角 */    -webkit-background-clip: text;    color: transparent;}/* loading渐变字体，依次输出动画 */@keyframes typing {    from {        width: 0;    }}.load span {    display: inline-block;    background-image: linear-gradient(to top right, rgb(27, 209, 255), rgb(236, 29, 255));    width: 3px;    height: 3px;    margin-left: 3px;    border-radius: 50%;    animation: dian 2.2s infinite linear;}/* 设置点的属性 */@keyframes dian {    0% {        transform: scale(1);        opacity: 0;    }    25% {        transform: scale(1.6);        opacity: 0.6;    }    50% {        transform: scale(2);        opacity: 1;    }    75% {        transform: scale(1.6);        opacity: 0.6;    }    100% {        transform: scale(1);        opacity: 0;    }}.load span:nth-child(2) {/* class名 span的第二个孩子 */    animation-delay: 0.8s;    /* 延时动画属性 */}.load span:nth-child(3) {    animation-delay: 1.6s;}.bar {    width: 150px;    height: 15px;    border-radius: 15px;    margin: 120px auto;    border: 1px solid rgba(25, 0, 255, 0.692);}/* 加载进度条框设置 */.bar span {    display: block;    width: 0px;    height: 15px;    border-radius: 14px;    background-image: linear-gradient(to top right, rgba(0, 255, 115, 0.322), rgba(8, 239, 255, 0.623), rgba(157, 255, 0, 0.548));    animation: bar 4s linear;    animation-fill-mode: forwards;    /* none：不改变默认行为。        forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。        backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。        both：向前和向后填充模式都被应用。 */}/* span标签填充进度条 */@keyframes bar {    0% {        width: 0%;    }    25% {        width: 25%;    }    50% {        width: 50%;    }    75% {        width: 75%;    }    100% {        width: 100%;    }}#num {    font-size: 14px;    display: inline;    position: relative;    left: 62px;    bottom: 18px;    z-index: 1;    color: rgb(0, 144, 155);}/* 百分比属性 */

JS部分(buffer.js)

window.onload = function() //窗口打开即开始加载{    var num = document.getElementById("num");    var width = 0;    var id = setInterval(frame,40); //定义id，用40毫秒调用frame的值,这里的时间和进度条span填充有关，当百分比为加到100时，颜色填充完毕。    function frame () {        if (width>=100) {            clearInterval(id)  //判断，如果宽度大于或等于100，清除        } else{            width++;            num.innerHTML = width * 1 + "%" //在网页中写出百分比的值        }    }}

最后，感谢读者来此间浏览！ヾ(ﾟ∀ﾟゞ)

注：若代码有什么瑕疵，可以告诉我，谢谢！

一、概述

二、代码

最后，感谢读者来此间浏览！ヾ(ﾟ∀ﾟゞ)

更多相关文章

随机推荐