css3+html5实现用户界面加载效果

源码 

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@font-face {
				font-family: "font_wrl";
				src: url(img/rtrxnfht.TTF);
			}

			@keyframes myprogress {
				0% {
					opacity: 0.2;
					border-color: yellowgreen;
					background: yellowgreen;
					width: 0%;
				}

				60% {
					opacity: 0.6;
					border-color: yellowgreen;
					background: yellowgreen;
					width: 60%;
				}

				100% {
					opacity: 1.0;
					border-color: yellowgreen;
					background: yellowgreen;
					width: 100%;
				}
			}

			@keyframes myTransform {
				0% {
					transform: scaleY(1);
				}

				20% {
					transform: scaleY(2);
				}

				21% {
					transform: scaleY(1);
				}

				100% {
					transform: scaleY(1);
				}
			}

			* {
				margin: 0;
				padding: 0;
			}

			#divMain {
				position: fixed;
				background: rgba(0, 0, 0, .45);
				width: 100%;
				height: 100%;
			}

			ul {
				width: auto;
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left: -22px;
			}

			ul>li {
				list-style: none;
				margin: auto 2px;
				float: left;
				height: 20px;
				width: 5px;
				background: yellowgreen;
				transform-origin: 50% 70%;
			}

			li:nth-child(1) {
				animation: myTransform 1.5s ease-in-out 0s infinite backwards;
			}

			li:nth-child(2) {
				animation: myTransform 1.5s ease-in-out .2s infinite backwards;
			}

			li:nth-child(3) {
				animation: myTransform 1.5s ease-in-out .4s infinite backwards;
			}

			li:nth-child(4) {
				animation: myTransform 1.5s ease-in-out .6s infinite backwards;
			}

			li:nth-child(5) {
				animation: myTransform 1.5s ease-in-out .8s infinite backwards;
			}

			.loadtext {
				width: 150px;
				color: yellowgreen;
				position: fixed;
				left: 50%;
				margin-left: -60px;
				top: 50%;
				margin-top: 30px;
				text-align: center;
				font-family: "font_wrl";
				letter-spacing: 2px;
			}

			#myprogress {
				height: 20px;
				border: 1px solid yellowgreen;
				position: fixed;
				bottom: 50px;
				border-radius: 5px;
				background: #9ACD32;
				animation: myprogress 5s linear infinite;
			}

			#myprogressborder {
				height: 20px;
				width: 100%;
				border: 1px solid yellowgreen;
				position: fixed;
				bottom: 50px;
				border-radius: 20px;
				line-height: 20px;
				color: #fff;
				font-family: "font_wrl";
				text-align: center;
				box-shadow: 0 0 0.5em #fff;
			}
		</style>
	</head>

	<body>
		<div style="background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600749017341&di=af5b9b0e1f839dcdb98836c711dded87&imgtype=0&src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F457%2F111%2F427%2F5b4fcb385d7d4bbdb96938e8090503b4.jpg) no-repeat; background-size: cover;height: 100%; width: 100%;display: block;position: absolute;"></div>
		<div id="divMain">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<span class="loadtext">用户界面加载中...</span>

			<div id="myprogress">
			</div>
			<div id="myprogressborder">
				当前进度：100%
			</div>
		</div>
	</body>

</html>

 

posted @ 2023-08-11 17:05  JackieDYH  阅读(54)  评论(0)  编辑  收藏  举报  来源