一个loading样式

最新推荐文章于 2024-06-20 13:18:10 发布

唠个锤子

最新推荐文章于 2024-06-20 13:18:10 发布

阅读量100

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/jpk010820/article/details/108161928

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta charset="utf-8">
		<title></title>
		<script>
			
			function al(i){
				
				while(i<10){
					alert("haha");
					i++;
				}
			}
		</script>
		<style>body{background: #99CCFF}
			/* body{background: -webkit-linear-gradient( right,#003399,#003366);} */
			.all{margin: 200px auto 30px;}
			#first{position:relative;
			height: 100px;
			width: 100px;
			margin: 20px auto;
			}
			
			#se {position:relative;
			height: 100px;
			width: 100px;
			margin: 20px auto;
			transform:translateY(-120px) translateX(0px) rotate(45deg) ;
			}
			
			#first div{background-color: antiquewhite;
			height: 15px;
			width: 15px;
			border-radius: 50%;
			}
			
			#se  div{background-color: antiquewhite;
			height: 15px;
			width: 15px;
			border-radius: 50%;
			}
			
			#first div:nth-child(1){position: absolute;top:0;left: 0;animation: 1s box infinite ;animation-delay:0s;}
			#first div:nth-child(2){position: absolute;top:0;right: 0;animation: 1s box  infinite ;animation-delay:0.2s}
			#first div:nth-child(3){position: absolute;bottom:0;left: 0;animation: 1s box  infinite ;animation-delay:0.6s}
			#first div:nth-child(4){position: absolute;bottom:0;right: 0;animation: 1s box  infinite ;animation-delay:0.4s}
			#se .box1{position: absolute;top:0;left: 0;animation: 1s box infinite ;animation-delay:0.1s}
			#se .box2{position: absolute;top:0;right: 0;animation: 1s box infinite  ;animation-delay:0.3s}
			#se .box3{position: absolute;bottom:0;left: 0;animation: 1s box  infinite ;animation-delay:0.7s}
			#se .box4{position: absolute;bottom:0;right: 0;animation: 1s box  infinite ;animation-delay:0.5s}
			@keyframes box{
				0%{transform: scale(1);background-color: pink;}
				50%{transform: scale(0);background-color: plum;}
				100%{transform: scale(1);}
			}
			
			#first hover{transition: 1s;transform: scale(3);}
			#se hover{transition: 1s;transform: scale(3);}
			#loading{width: 80%;height: 20px;
			background-color: aliceblue;
			margin: 0 auto;border-radius: 30px;
			box-shadow:0px 0px 20px #003366;}
			.x{animation: 5s x infinite;
			width: 70%;height: 20px;
			background-color: #ABCDEF;
			border-radius: 30px;
			
			line-height: 100px;}
			@keyframes x{
				from{width: 0%;}
				to{width: 100%;}
			}
			.text{text-align: center;
			margin: 20px auto;
			color: white;
			text-shadow: 0px 0px 20px darkgrey;}
		</style>
	</head>
	<body>
		<div class="all">
			<div id="first">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div id="se">
				<div class="box1"></div>
				<div class="box2"></div>
				<div class="box3"></div>
				<div class="box4"></div>
			</div>	
		</div>
		<div id="loading">
			<div class="x"></div>
		</div>
		<div class="text" onclick="al(7)">加载中</div>
		
			
		
	</body>
</html>

唠个锤子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个loading样式

一个loading样式代码如下<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> <title></title> <script> function al(i){
复制链接

扫一扫