html元素在页面加载css,网站加载页面(HTML+CSS+JS,简易版)

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);}/* 百分比属性 */