一、概述
本张页面由我做的一个个人网站而来,静态页面,编码简单,希望对你有用。不喜勿喷,感谢。废话不多说,直接上图。(注:进度条可以参考参考!)
二、代码
-
HTML部分
网站小图标!
<!DOCTYPE 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"> <!-- 网页自动跳转,5.5为过度时间,URL为目标页面 --> <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon"> <!-- 网站小图标,href链接本地图片地址 --> <link rel="stylesheet" href="./css/buffer.css" type="text/css"> <!-- css外部链接,href链接css文件本地地址 --> <script src="./js/buffer.js"></script> <!-- js外部链接,src链接js文件本地地址 --> <title>Buffer</title> </head> <body> <div class="box"> <div class="head"> <img src="./img/buffer.png"> <!-- 自定义图片,我这个是酒桶,src图片地址 --> <div class="shadow"> <!-- 阴影部分 --> <span></span> </div> <div class="load"> <p>Loading</p> <!-- 加载文字 --> <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 + "%" //在网页中写出百分比的值 } } }
最后,感谢读者来此间浏览!ヾ(゚∀゚ゞ)
注:若代码有什么瑕疵,可以告诉我,谢谢!