HTML+CSS实现loading

最新推荐文章于 2024-06-20 13:18:10 发布
最新推荐文章于 2024-06-20 13:18:10 发布
阅读量917 收藏
点赞数
分类专栏： css3 文章标签： css loading

http://www.webhek.com/misc/css-loaders

看到了几个loading 蛮好玩的就抄过来，然后就自己写，碰到好玩的loading都抄过来，看看到底能些多少！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background-color: #ccc;
		font-family: "sans-serif";
	}
	#main{
		width: 960px;
		margin: 0px auto;
	}
	.contain_load{
		width: 240px;
		height: 240px;
		border: 1px solid #fff;
		float: left;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
	}
	.load1 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 30px;
		width: 140px;
		height: 140px;
		border-radius: 100%;
		border-top: 20px solid rgba(255,255,255,0.4);
		border-right: 20px solid rgba(255,255,255,0.4);
		border-bottom: 20px solid rgba(255,255,255,0.4);
		border-left: 20px solid rgba(255,255,255,1);
		-webkit-animation: load1 1.3s infinite linear;
				animation: load1 1.3s infinite linear;
	}
	@-webkit-keyframes load1 {
	  0% {
	    -webkit-transform: rotate(0deg);
	  }
	  100% {
	    -webkit-transform: rotate(360deg);
	  }
	}
	
	/*loading 2*/
	.load2 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 30px;
		width: 180px;
		height: 180px;
		background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
		background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
		border-radius: 100%;
		-webkit-animation: load2 1.3s infinite linear;
				animation: load2 1.3s infinite linear;
	}
	.load2 .loader::before{
		content:'';
		position: absolute;
		top:25%;
		left:25%;
		-webkit-transform: translate(-50% ,-50%);
		        transform: translate(-50% ,-50%);
		width: 90px;
		height: 90px;
		background-color: #fff;
		border-radius: 100% 0 0; 
	}
	.load2 .loader::after{
		content:'';
		position: absolute;
		top:50%;
		left:50%;
		-webkit-transform: translate(-50% ,-50%);
		        transform: translate(-50% ,-50%);
		width: 140px;
		height: 140px;
		background-color: #ccc;
		border-radius: 100% ;
	}
	
	@-webkit-keyframes load2 {
	  0% {
	    -webkit-transform: rotate(0deg);
	  }
	  100% {
	    -webkit-transform: rotate(360deg);
	  }
	}
	/*loading 3*/
	.load3 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 30px;
		width: 180px;
		height: 180px;
		border-radius: 100%;
		box-shadow: 0 0 0 20px #fff inset;
	}

	.load3 .loader::before{
		content: '';
		position: absolute;
		top:0px;
		left:90px;
		width: 90px;
		height: 180px;
		background-color: #ccc;
		-webkit-transform-origin:0 50%;
				transform-origin:0 50%;
		-webkit-animation: load3 2s infinite ease 1.5s;
				animation: load3 2s infinite ease 1.5s;
		
	}
	.load3 .loader::after{
		content: '';
		position: absolute;
		top:0px;
		left:0px;
		width: 90px;
		height: 180px;
		background-color: #ccc;
		-webkit-transform-origin:100% 50%;
				transform-origin:100% 50%;
		-webkit-animation: load3 2s infinite ease;
				animation: load3 2s infinite ease;
		
	}
	
	@-webkit-keyframes load3 {
	  0% {
	    -webkit-transform: rotate(0deg);
	  }
	  100% {
	    -webkit-transform: rotate(360deg);
	  }
	}
	/*loading 4 */
	.load4 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 110px auto;
		width: 20px;
		height: 20px;
		border-radius: 100%;
		-webkit-animation: load4 1.5s infinite ease-out;
				animation: load4 1.5s infinite ease-out;
		
	}

	@-webkit-keyframes load4 {
	  0%,100% {
	    box-shadow: 0 70px 0 -10px #ffffff , 49px 49px 0 -8px #ffffff , 70px 0px 0 -4px #ffffff , 49px -49px 0 2px #ffffff ,
					0 -70px 0 5px #ffffff,	-49px -49px 0 2px #ffffff , -70px 0px 0 -4px #ffffff , -49px 49px 0 -8px #ffffff ;
	  }
	  12.5%{
		box-shadow: 0 70px 0 -8px #ffffff , 49px 49px 0 -4px #ffffff , 70px 0px 0 2px #ffffff , 49px -49px 0 5px #ffffff , 
					0 -70px 0 2px #ffffff, -49px -49px 0 -4px #ffffff , -70px 0px 0 -8px #ffffff , -49px 49px 0 -10px #ffffff;
	  }
	  25%{
		box-shadow: 0 70px 0 -4px #ffffff , 49px 49px 0 2px #ffffff , 70px 0px 0 5px #ffffff , 49px -49px 0 2px #ffffff ,
					0 -70px 0 -4px #ffffff,	-49px -49px 0 -8px #ffffff , -70px 0px 0 -10px #ffffff , -49px 49px 0 -8px #ffffff ;
	  }
	  37.5%{
		box-shadow: 0 70px 0 2px #ffffff , 49px 49px 0 5px #ffffff , 70px 0px 0 2px #ffffff , 49px -49px 0 -4px #ffffff ,
					0 -70px 0 -8px #ffffff,	-49px -49px 0 -10px #ffffff , -70px 0px 0 -8px #ffffff , -49px 49px 0 -4px #ffffff ;
	  }
	  50%{
	  	box-shadow: 0 70px 0 5px #ffffff , 49px 49px 0 2px #ffffff , 70px 0px 0 -4px #ffffff , 49px -49px 0 -8px #ffffff ,
					0 -70px 0 -10px #ffffff,	-49px -49px 0 -8px #ffffff , -70px 0px 0 -4px #ffffff , -49px 49px 0 2px #ffffff ;
	  }
	  62.5%{
		box-shadow: 0 70px 0 2px #ffffff , 49px 49px 0 -4px #ffffff , 70px 0px 0 -8px #ffffff , 49px -49px 0 -10px #ffffff ,
					0 -70px 0 -8px #ffffff,	-49px -49px 0 -4px #ffffff , -70px 0px 0 2px #ffffff , -49px 49px 0 5px #ffffff ;
	  }
	  75%{
		box-shadow: 0 70px 0 -4px #ffffff , 49px 49px 0 -8px #ffffff , 70px 0px 0 -10px #ffffff , 49px -49px 0 -8px #ffffff ,
					0 -70px 0 -4px #ffffff,	-49px -49px 0 2px #ffffff , -70px 0px 0 5px #ffffff , -49px 49px 0 2px #ffffff ;
	  }
	  87.5%{
	  	box-shadow: 0 70px 0 -8px #ffffff , 49px 49px 0 -10px #ffffff , 70px 0px 0 -8px #ffffff , 49px -49px 0 -4px #ffffff ,
					0 -70px 0 2px #ffffff,	-49px -49px 0 5px #ffffff , -70px 0px 0 2px #ffffff , -49px 49px 0 -4px #ffffff ;
	  }
	}

	/*loading 5 */
	.load5 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 60px auto;
		width: 30px;
		height: 30px;
		border-radius: 100%;
		-webkit-animation: load5 1.5s infinite ease-out 0.2s;
				animation: load5 1.5s infinite ease-out 0.2s;
		
	}
	.load5 .loader::before{
		content: '';
		position: absolute;
		text-indent: -9999px;
		left: -50px;
		width: 30px;
		height: 30px;
		border-radius: 100%;
		-webkit-animation: load5 1.5s infinite ease-out;
				animation: load5 1.5s infinite ease-out;
		
	}
	.load5 .loader::after{
		content: '';
		position: absolute;
		text-indent: -9999px;
		left: 50px;
		width: 30px;
		height: 30px;
		border-radius: 100%;
		-webkit-animation: load5 1.5s infinite ease-out 0.4s;
				animation: load5 1.5s infinite ease-out 0.4s;
	}
	
	@-webkit-keyframes load5 {
	  0% ,100%{
	    box-shadow: 0 50px 0 5px #fff;
	  }
	  20% {
	    box-shadow: 0 50px 0 -5px #fff;
	  }
	  40% {
	    box-shadow: 0 50px 0 -15px #fff;
	  }
	  80% {
	    box-shadow: 0 50px 0 -15px #fff;
	  }
	}

	/*loading 6 */
	.load6 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 110px auto;
		width: 20px;
		height: 20px;
		border-radius: 100%;
		-webkit-animation: load6 1.5s infinite ease-out;
				animation: load6 1.5s infinite ease-out;
		
	}

	@-webkit-keyframes load6 {
	  0%,100% {
	    box-shadow: 
	    0 70px 0 5px rgba(255,255,255,0.1),49px 49px 0 5px rgba(255,255,255,0.2),70px 0px 0 5px rgba(255,255,255,0.3),49px -49px 0 5px rgba(255,255,255,0.4) ,
		0 -70px 0 5px rgba(255,255,255,0.5),-49px -49px 0 5px rgba(255,255,255,0.6),-70px 0px 0 5px rgba(255,255,255,0.7),-49px 49px 0 5px rgba(255,255,255,1) ;
	  }
	  12.5%{
	  	box-shadow: 
		0 70px 0 5px rgba(255,255,255,0.2),49px 49px 0 5px rgba(255,255,255,0.3),70px 0px 0 5px rgba(255,255,255,0.4),49px -49px 0 5px rgba(255,255,255,0.5) ,
		0 -70px 0 5px rgba(255,255,255,0.6),-49px -49px 0 5px rgba(255,255,255,0.7),-70px 0px 0 5px rgba(255,255,255,1),-49px 49px 0 5px rgba(255,255,255,0.1) ;
	  }
	  25%{
	  	box-shadow: 
		0 70px 0 5px rgba(255,255,255,0.3),49px 49px 0 5px rgba(255,255,255,0.4),70px 0px 0 5px rgba(255,255,255,0.5),49px -49px 0 5px rgba(255,255,255,0.6) ,
		0 -70px 0 5px rgba(255,255,255,0.7),-49px -49px 0 5px rgba(255,255,255,1),-70px 0px 0 5px rgba(255,255,255,0.1),-49px 49px 0 5px rgba(255,255,255,0.2) ;
	  }
	  37.5%{
	  	box-shadow: 
		0 70px 0 5px rgba(255,255,255,0.4),49px 49px 0 5px rgba(255,255,255,0.5),70px 0px 0 5px rgba(255,255,255,0.6),49px -49px 0 5px rgba(255,255,255,0.7) ,
		0 -70px 0 5px rgba(255,255,255,1),-49px -49px 0 5px rgba(255,255,255,0.1),-70px 0px 0 5px rgba(255,255,255,0.2),-49px 49px 0 5px rgba(255,255,255,0.3) ;
	  }
	  50%{
	  	box-shadow: 
	  	0 70px 0 5px rgba(255,255,255,0.5),49px 49px 0 5px rgba(255,255,255,0.6),70px 0px 0 5px rgba(255,255,255,0.7),49px -49px 0 5px rgba(255,255,255,1) ,
		0 -70px 0 5px rgba(255,255,255,0.1),-49px -49px 0 5px rgba(255,255,255,0.2),-70px 0px 0 5px rgba(255,255,255,0.3),-49px 49px 0 5px rgba(255,255,255,0.4) ;
	  }
	  62.5%{
	  	box-shadow: 
		0 70px 0 5px rgba(255,255,255,0.6),49px 49px 0 5px rgba(255,255,255,0.7),70px 0px 0 5px rgba(255,255,255,1),49px -49px 0 5px rgba(255,255,255,0.1) ,
		0 -70px 0 5px rgba(255,255,255,0.2),-49px -49px 0 5px rgba(255,255,255,0.3),-70px 0px 0 5px rgba(255,255,255,0.4),-49px 49px 0 5px rgba(255,255,255,0.5) ;
	  }
	  75%{
	  	box-shadow: 
		0 70px 0 5px rgba(255,255,255,0.7),49px 49px 0 5px rgba(255,255,255,1),70px 0px 0 5px rgba(255,255,255,0.1),49px -49px 0 5px rgba(255,255,255,0.2) ,
		0 -70px 0 5px rgba(255,255,255,0.3),-49px -49px 0 5px rgba(255,255,255,0.4),-70px 0px 0 5px rgba(255,255,255,0.5),-49px 49px 0 5px rgba(255,255,255,0.6) ;
	  }
	  87.5%{
	  	box-shadow: 
	  	0 70px 0 5px rgba(255,255,255,1),49px 49px 0 5px rgba(255,255,255,0.1),70px 0px 0 5px rgba(255,255,255,0.2),49px -49px 0 5px rgba(255,255,255,0.3) ,
		0 -70px 0 5px rgba(255,255,255,0.4),-49px -49px 0 5px rgba(255,255,255,0.5),-70px 0px 0 5px rgba(255,255,255,0.6),-49px 49px 0 5px rgba(255,255,255,0.7) ;
	  }
	}

	/*loading 7*/
	.load7 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 90px auto;
		width: 20px;
		height: 60px;
		background-color: #fff;
		-webkit-animation: load7 2s infinite ease-in-out 0.2s;
				animation: load7 2s infinite ease-in-out 0.2s;
	}
	
	.load7 .loader::before{
		content: '';
		position: absolute;
		text-indent: -9999px;
		left:-30px;
		width: 20px;
		height: 60px;
		background-color: #fff;
		-webkit-animation: load7 2s infinite ease-in-out;
				animation: load7 2s infinite ease-in-out;
	}

	.load7 .loader::after{
		content: '';
		position: absolute;
		text-indent: -9999px;
		left:30px;
		width: 20px;
		height: 60px;
		background-color: #fff;
		-webkit-animation: load7 2s infinite ease-in-out 0.4s;
				animation: load7 2s infinite ease-in-out 0.4s;
	}

	@-webkit-keyframes load7 {
	  0% , 50% ,100%{
	    height : 60px;
	    box-shadow: 0 0 #fff;
	  }
	  25%,75%{
	  	box-shadow: 0 -20px #fff;
		height : 80px;
	  }
	}

	/*loading 8*/
	.load8 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 110px auto;
	    width: 20px;
	    height: 20px;
	    border-radius: 50%;
	    box-shadow:0px 90px 0 0px #fff,33.5px 80.5px 0 -1.5px #fff,63px 63px 0 -3px #fff,80.5px 33.5px 0 -4.5px #fff,90px 0px 0 -6px #fff;
	    -webkit-animation: load8 2s infinite ease-in-out;
			    animation: load8 2s infinite ease-in-out;
	}
	
	@-webkit-keyframes load8 {
		100%{
			-webkit-transform :rotate(360deg);
			box-shadow: 0px 90px 0 0px #fff,0px 90px 0 -1.5px #fff,0px 90px 0 -3px #fff,0px 90px 0 -4.5px #fff,0px 90px 0 -6px #fff;
		}
		/* 25%{
			box-shadow: 90px 0px 0 0px #fff;
		}
		50%{
			box-shadow:0px 90px 0 0px #fff,33.5px 80.5px 0 -1.5px #fff,63px 63px 0 -3px #fff,80.5px 33.5px 0 -4.5px #fff,90px 0px 0 -6px #fff;
		}
		75%{
			box-shadow:-90px 0px 0 0px #fff,-80.5px 33.5px 0 -1.5px #fff,-63px 63px 0 -3px #fff,-33.5px 80.5px 0 -4.5px #fff,0px 90px 0 -6px #fff;
		} */
	}


	/*loading 9 */
	.load9 .loader{
		position: absolute;
		text-indent: -9999px;
		top:40px;
		left: 116px;
		width: 8px;
    	height: 50px;
   		border-radius: 4px;
		-webkit-transform-origin:4px 80px;
		
	}
	.load9 .l1{
		-webkit-transform: rotate(45deg);
		        transform: rotate(45deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:0.2s;  
		 		animation-delay:0.2s;
      
	}
	.load9 .l2{
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:0.4s;  
		 		animation-delay:0.4s;
	}
	.load9 .l3{
		-webkit-transform: rotate(135deg);
		        transform: rotate(135deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:0.6s;  
		 		animation-delay:0.6s;
	}
	.load9 .l4{
		-webkit-transform: rotate(180deg);
		        transform: rotate(180deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:0.8s;  
		 		animation-delay:0.8s;
	}
	.load9 .l5{
		-webkit-transform: rotate(225deg);
		        transform: rotate(225deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:1s;  
		 		animation-delay:1s;
	}
	.load9 .l6{
		-webkit-transform: rotate(270deg);
		        transform: rotate(270deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:1.2s;  
		 		animation-delay:1.2s;
	}
	.load9 .l7{
		-webkit-transform: rotate(315deg);
		        transform: rotate(315deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:1.4s;  
		 		animation-delay:1.4s;
	}
	.load9 .l8{
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
		-webkit-animation: load9 1.6s infinite linear;
				animation: load9 1.6s infinite linear;
		-webkit-animation-delay:1.6s;  
		 		animation-delay:1.6s;
	}
	@-webkit-keyframes load9 {
	  0%{
	  	background-color: rgba(255,255,255,1);
	  }
	  100%{
	  	background-color: rgba(255,255,255,0);
	  }
	}
	/*loading 10 */
	.load10 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 50px auto;
		width: 140px;
    	height: 140px;
   		border-radius: 50%;
   		box-shadow: 0 0 0 10px #fff;
	}
	.load10 .loader::before{
		content: '';
		position: absolute;
		top: 10px;
	    left: 68px;
	    width: 4px;
	    height: 60px;
	    border-radius: 2px;
    	background-color: #fff;
    	-webkit-transform-origin: 2px 60px ;
    	-webkit-animation: load10 2s infinite linear;
				animation: load10 2s infinite linear;
   		
	}
	.load10 .loader::after{
		content: '';
		position: absolute;
		top: 30px;
	    left: 66px;
	    width: 8px;
	    height: 40px;
	    border-radius: 4px;
	    -webkit-transform-origin: 4px 40px ;
    	background-color: #fff;
    	-webkit-animation: load10 8s infinite linear;
				animation: load10 8s infinite linear;

	}
	
	@-webkit-keyframes load10 {
	  100%{
		-webkit-transform:rotate(360deg);
	  }
	}
	/*loading 11 */
	.load11 .loader{
		position: relative;
	    text-indent: -9999px;
	    margin: 90px 30px;
	    width: 120px;
	    height: 60px;
	    border-radius: 5px;
	    box-shadow: 0 0 0 10px #fff;
	}
	.load11 .loader::before{
		position: absolute;
	    content: '';
	    top: 10px;
	    left: 132px;
	    width: 14px;
	    height: 40px;
	    border-radius: 5px;
	    background-color: rgba(0,0,0,0.2);
	}
	.load11 .loader::after{
		position: absolute;
	    content: '';
	    top: -1px;
	    left: 0px;
	    width: 5px;
	    height: 62px;
	    background-color: #fff;
	    -webkit-animation: load11 3s infinite linear;
			    animation: load11 3s infinite linear;
	}

	@-webkit-keyframes load11 {
	  100%{
		width: 120px;
	  }
	}

	/*loading 12 */
	.load12 .loader{
	    position: relative;
	    text-indent: -9999px;
	    margin: 75px 30px;
	    width: 80px;
	    height: 90px;
	    border-radius: 40px;
	    background-color: #fff;
	    box-shadow: 100px 0 0 0 #fff;
	}

	.load12 .loader::after{
		content: '';
	    position: absolute;
	    top: 42px;
	    left: 37px;
	    width: 40px;
	    height: 40px;
	    border-radius: 40px;
	    background-color: rgba(0,0,0,0.4);
	    box-shadow: 100px 0 0 0 rgba(0,0,0,0.4);;
	    -webkit-animation: load12 3s infinite linear;
	    		animation: load12 3s infinite linear;
	}

	.load12 .loader::before{
	    position: absolute;
	    top: 42px;
	    left: 3px;
	    width: 40px;
	    height: 40px;
	    border-radius: 40px;
	    background-color: red;
	    box-shadow: 100px 0 0 0 red;
	}
	@-webkit-keyframes load12 {
	  12.5%{
		top: 47px;
	    left: 28.5px;
	  }
	  25%{
		top: 50px;
	    left: 20px;
	  }
	  37.5%{
		top: 47px;
	    left: 11.5px;
	  }
	  50%{
		top: 42px;
	    left: 3px;
	  }
	  62.5%{
		top: 47px;
	    left: 11.5px;
	  }
	  75%{
		top: 50px;
	    left: 20px;
	  }
	  87.5%{
		top: 47px;
	    left: 28.5px;
	  }
	}

	/*loading 13 */
	.load13 .loader{
	    position: relative;
	    text-indent: -9999px;
	    margin: 0px 80px;
	    width: 80px;
	    height: 80px;
	    border-radius: 40px;
	    -webkit-animation: load13 1.5s infinite ease-out 0.5s;
			    animation: load13 1.5s infinite ease-out 0.5s;
	    
	}
	.load13 .loader::before{
		content:'';
	    position: absolute;
	    top:0px;
	    left: 0px;
	    width: 80px;
	    height: 80px;
	    border-radius: 40px;
	    -webkit-animation: load13 1.5s infinite ease-out ;
			    animation: load13 1.5s infinite ease-out ;
	    
	}
	.load13 .loader::after{
		content:'';
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 80px;
	    height: 80px;
	    border-radius: 40px;
	    -webkit-animation: load13 1.5s infinite ease-out 1s;
			    animation: load13 1.5s infinite ease-out 1s;
	}

	@-webkit-keyframes load13 {
	  0%{
	    box-shadow: 0 80px 0 -80px rgba(255,255,255,1);
	  }
	  100% {
	    box-shadow: 0 80px 0 0 rgba(255,255,255,0.1);
	  }
	}

	/*loading 14 */
	.load14 .loader{
	    position: relative;
	    text-indent: -9999px;
	    margin: 20px 80px;
	    width: 80px;
	    height: 80px;
	    border-radius: 40px;
	    background-color: rgba(255,255,255,0.5);
		-webkit-transform-origin : 40px 120px;
		-webkit-animation: load14 2s infinite ease-in-out;
				animation: load14 2s infinite ease-in-out;
	}

	@-webkit-keyframes load14{
		50%{
			-webkit-transform: scale(0.2) rotate(180deg);
			        transform: scale(0.2) rotate(180deg);
			background-color: rgba(255,255,255,1);
		}
		100%{
			-webkit-transform: scale(1) rotate(360deg);
			        transform: scale(1) rotate(360deg);
			background-color: rgba(255,255,255,0.5);
		}
	}

	/*loading 15 */
	.load15 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 50px auto;
		width: 140px;
    	height: 140px;
   		border-radius: 50%;
   		box-shadow: 0 0 0 10px #fff;
	}
	.load15 .loader::before{
		content: '';
		position: absolute;
		z-index: -1;
		top: 90px;
		left: 0px;
		width: 140px;
    	height: 50px;
    	border-radius: 0 0 60px 60px;
    	background-color: rgba(0,0,0,0.2);
	}
	.load15 .loader::after{
		content: '';
		position: absolute;
		top: 40px;
		left: 65px;
		width: 10px;
    	height: 60px;
    	background-color:#fff;
    	border-radius: 5px;
    	-webkit-transform-origin:5px 50px;
		-webkit-animation: load15 2s infinite linear;
				animation: load15 2s infinite linear;
	}
	@-webkit-keyframes load15{
		0%,100%{
			-webkit-transform :rotate(0deg);
					transform :rotate(0deg);
		}
		25%{
			-webkit-transform :rotate(75deg);
					transform :rotate(75deg);
		}
		75%{
			-webkit-transform :rotate(-75deg);
					transform :rotate(-75deg);
		}
	}

	/*loading 16 */
	.load16 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 50px auto;
		width: 80px;
    	height: 80px;
   		
	}
	.load16 .loader::after{
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		width: 80px;
    	height: 80px;
   		border-radius: 100% 100% 100% 0;
   		-webkit-transform : rotate(-45deg);
   		box-shadow: 0 0 0 6px #fff;
   		background-color: #fff;
   		-webkit-animation: load16 1.5s infinite ease-in-out;
		   		animation: load16 1.5s infinite ease-in-out;

	}
	.load16 .loader::before{
		content: '';
		position: absolute;
		top: 40px;
		left: -30px;
		width: 140px;
    	height: 140px;
    	border-radius: 100%;
    	-webkit-transform : rotateX(70deg);
    	background-color: rgba(0,0,0,0.2);
	}

	@-webkit-keyframes load16{
		50%{
			top:-20px;
		}
	}

	/*loading 17 */
	.load17 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 20px auto;
		width: 200px;
    	height: 200px;
    	background-color: #CCC;
    	overflow: hidden;
    	border-radius: 50%;
    	-webkit-transform: rotate(0deg);
    	-webkit-animation: load17 2s infinite linear;
		    	animation: load17 2s infinite linear;
	}
	.load17 .loader::before{
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100px;
    	height: 100px;
    	background-color: rgba(0,0,0,0.4);
    	-webkit-transform-origin:100% 100%;
    	-webkit-transform: rotate(90deg) skew(45deg);
    	overflow: hidden;
    	
	}
	.load17 .loader::after{
		content: '';
		position: absolute;
		z-index: 1;
		top: 90px;
		left: 90px;
		width: 20px;
    	height: 20px;
    	border-radius: 50%;
    	background-color: rgba(0,0,0,0.4);
    	cursor: pointer;
	}
	@-webkit-keyframes load17{
		100%{
			-webkit-transform: rotate(360deg);
		}
	}

	/*loading 18 */
	.load18 .loader{
		position: relative;
		text-indent: -9999px;
		margin: 20px auto;
		width: 200px;
    	height: 200px;
    	background-color: #fff;
    	overflow: hidden;
    	border-radius: 50%;
    	-webkit-transform : scale(1);
	}

	.load18 .loader .box{
		position: relative;
		margin: -50%;
		width: 200px;
    	height: 200px;
    	-webkit-transform-origin:100% 100%;
    	-webkit-transform :skew(150deg);
    	background-color: rgba(255,0,0,0.3);
	}
	.load18 .loader .box::before{
		content: '';
		position: absolute;
		top:0;
		left: 0px;
		width: 200px;
    	height: 200px;
    	-webkit-transform-origin:100% 100%;
    	-webkit-transform:rotate(90deg) skew(140deg);
    	background-color: rgba(0,255,0,0.3);
	}
	.load18 .loader .box::after{
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		width: 200px;
    	height: 200px;
    	-webkit-transform-origin:100% 100%;
    	-webkit-transform:rotate(220deg) skew(130deg);
    	background-color: rgba(0,0,255,0.3);
	}

	/*loading 19 */
	.load19 {
		font-family: "微软雅黑";
		font-weight: bolder;
		color: red;
		font-size: 50px;
		line-height: 240px;
		text-align: center;
		background-image: -webkit-gradient(linear,0 0, right 0, from(rgba(255, 0, 0, 1)), to(rgba(0, 0, 255, 1)));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	</style>
</head>
<body>
	<div id="main">
		<!-- div#load$.contain_load.load$*8>div.loader -->
		<div id="load1" class="contain_load load1">
			<div class="loader">加载中</div>
		</div>
		<div id="load2" class="contain_load load2">
			<div class="loader">加载中</div>
		</div>
		<div id="load3" class="contain_load load3">
			<div class="loader">加载中</div>
		</div>
		<div id="load4" class="contain_load load4">
			<div class="loader">加载中</div>
		</div>
		<div id="load5" class="contain_load load5">
			<div class="loader">加载中</div>
		</div>
		<div id="load6" class="contain_load load6">
			<div class="loader">加载中</div>
		</div>
		<div id="load7" class="contain_load load7">
			<div class="loader">加载中</div>
		</div>
		<div id="load8" class="contain_load load8">
			<div class="loader">加载中</div>
		</div>
		<div id="load9" class="contain_load load9">
			<div class="loader l1">加载中</div>
			<div class="loader l2">加载中</div>
			<div class="loader l3">加载中</div>
			<div class="loader l4">加载中</div>
			<div class="loader l5">加载中</div>
			<div class="loader l6">加载中</div>
			<div class="loader l7">加载中</div>
			<div class="loader l8">加载中</div>
		</div>
		<div id="load10" class="contain_load load10">
			<div class="loader">加载中</div>
		</div>
		<div id="load11" class="contain_load load11">
			<div class="loader">加载中</div>
		</div>
		<div id="load12" class="contain_load load12">
			<div class="loader">加载中</div>
		</div>
		<div id="load13" class="contain_load load13">
			<div class="loader">加载中</div>
		</div>
		<div id="load14" class="contain_load load14">
			<div class="loader">加载中</div>
		</div>
		<div id="load15" class="contain_load load15">
			<div class="loader">加载中</div>
		</div>
		<div id="load16" class="contain_load load16">
			<div class="loader">加载中</div>
		</div>
		<div id="load17" class="contain_load load17">
			<div class="loader">加载中</div>
		</div>
		<div id="load18" class="contain_load load18">
			<div class="loader">
				<div class="box"></div>
			</div>
		</div>
		<div id="load17" class="contain_load load19">
			未完待续
		</div>
	</div>
</body>
</html>


jl2577
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3小实例：叠方块loading加载动画
艾恩小灰灰的博客
07-22 2020
实例：叠方块loading加载动画。技术栈：HTML+CSS。
HTML+CSS实现页面Loading效果
醉酒的李白、的博客
08-23 764
HTML+CSS实现页面Loading效果
html+css实现Loading动画
Y_one的博客
06-16 986
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .Loading{ width: 150px; height: 150px; position: absolute;
纯 CSS 实现十个不错的 Loading 效果！
zz_jesse的博客
06-20 257
作者：Jimmyhttps://juejin.cn/post/7080542771387301896在推特上面看到 T. Afif[1] 介绍的十个 Loading 效果。如上图。Yeah，很赞哦，挺实用的，遂记录下来。为保证运行正常，咱先规定下：*{ box-sizing:border-box; }1. 平滑加载<divclass="progress-1"></div...
纯 HTML + CSS 实现圆形 loading 动画效果
廖若星辰-LTY
12-12 1372
使用纯 HTML + CSS 实现圆形 loading 加载动画效果
HTML+CSS实现加载动画
weixin_44260108的博客
12-30 482
使用CSS、HTML来实现内容加载的动画效果
简单的 HTML + CSS Loading 效果
broken_promise的博客
05-23 1000
简单的 HTML + CSS Loading 效果 先看结果 HTML <body> <div class="loading"> <span style="--i: 0;"></span> <span style="--i: 1;"></span> <span style="--i: 2;"></span> <span style="--i: 3;"></s
HTML+CSS+JS实现 ❤️制作loading动画效果❤️
java李阳勇的博客
09-09 1226
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： CSS样式： .load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #FFF; -w
使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
10-30 5111
网页使用loading可以给用户带来更好的体验，避免网页渲染中长时间出现网页整体空白从而影响访客的体验，loading在部分大型APP也有在应用。下面使用HTML+CSS+JS实现完整的Loading效果。
HTML+CSS+JS实现网页初始加载动画（loading）
weixin_45848992的博客
08-15 1822
首先需要找一个loading的gif，在这里提供一个比较简单的加载动画 然后是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w.
css实现loading,css3 实现loading效果
weixin_42351362的博客
08-03 2635
1 圆点渐入渐出要点： 缩放和透明度的变化,循环变化.demo1{width: 40px;height: 40px;margin: 0 auto;border-radius: 100px;background-color: red;opacity:;animation: fadeIn 1s infinite ease-in-out;}@-webkit-keyframes fadeIn{from{t...
html+css 移动端商城网页设计实现
04-27
在本文中，我们将深入探讨如何使用HTML5和CSS来实现移动端商城网页的设计。移动商城网站是现代电子商务不可或缺的一部分，它们提供了便捷的购物体验，让用户在手机和平板电脑上也能轻松浏览和购买商品。我们将逐一...
jQuery+CSS3 loading文字加载动画特效.zip
09-22
这个"jQuery+CSS3 loading文字加载动画特效.zip"压缩包文件包含了利用这两项技术实现的加载动画效果，对于网页开发者来说是一个非常实用的资源。 首先，jQuery库的核心特性包括选择器，使得选取HTML元素变得更加...
jquery+CSS3按钮加载loading动画效果
06-12
今天我们将探讨如何利用jQuery和CSS3技术实现按钮加载loading动画效果，让用户的等待过程更加有趣且不显枯燥。 首先，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理以及AJAX交互。在我们的场景中...
基于js+html+css复杂商城页面
08-31
同时，利用HTML5的数据属性（data-*）和CSS类名，可以方便地与JavaScript进行交互，实现页面元素的控制。 此外，为了提升性能和用户体验，需要考虑优化策略，如延迟加载（lazy loading）大图、减少HTTP请求、合理...
css3实现加载loading特效小动画效果
06-12
总结来说，CSS3加载loading特效小动画效果是通过结合关键帧动画、变换（transform）、过渡（transition）以及颜色和背景的动态变化来实现的。这些技术的运用让网页加载不再枯燥，而是成为了一种视觉享受。在实际开发...
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中.zip
07-31
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中
chromedriver-mac-x64_121.0.6167.184.zip
最新发布
07-31
chromedriver-mac-x64_121.0.6167.184.zip
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。.zip
07-31
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。
html+css+js实现微信和支付宝扫码支付前端
05-30
以下是一个简单的 HTML、CSS、JavaScript 实现微信和支付宝扫码支付前端的示例： ```html <!DOCTYPE html> <html> 扫码支付 , initial-scale=1.0"> body { background-color: #f0f0f0; font-family:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值