css-实现吃货loading加载效果

xyc

   今天看到一个loading加载样式效果，就整理了一下给大家分享一下。
   效果：
   
   HTML：
   

[HTML] 纯文本查看 复制代码

<div class="load">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

   css样式：
   

[CSS] 纯文本查看 复制代码

.load{position:fixed;width:120px;height:50px;top:45%;left:50%;z-index:555;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);}
.load > div:nth-child(2){-webkit-animation:rotates 1s 0s infinite linear;animation:rotates 1s 0s infinite linear;}
.load > div:nth-child(3){-webkit-animation:rotates 1s 0.33s infinite linear;animation:rotates 1s 0.33s infinite linear;}
.load > div:nth-child(4){-webkit-animation:rotates 1s 0.66s infinite linear;animation:rotates 1s 0.66s infinite linear;}
.load > div:nth-child(5){-webkit-animation:rotates 1s 0.99s infinite linear;animation:rotates 1s 0.99s infinite linear;}
.load > div:first-of-type{width:0px;height:0px;border-right:25px solid transparent;border-top:25px solid #0c83f0;border-left:25px solid #0c83f0;border-bottom:25px solid #0c83f0;border-radius:25px;-webkit-animation:rotateUp 0.5s 0s infinite;animation:rotateUp 0.5s 0s infinite;}
.load > div:first-of-type::after{position:relative;content:"";width:10px;height:10px;background-color:#333;left:0px;top:-20px;border-radius:100%;z-index:9999;}
.load > div:nth-child(2){width:0px;height:0px;border-right:25px solid transparent;border-top:25px solid #0c83f0;border-left:25px solid #0c83f0;border-bottom:25px solid #0c83f0;border-radius:25px;-webkit-animation:rotateDown 0.5s 0s infinite;animation:rotateDown 0.5s 0s infinite;margin-top:-50px;}
.load > div:nth-child(3),.load > div:nth-child(4),.load > div:nth-child(5),.load > div:nth-child(6){background-color:#0c83f0;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:100px;}
@-webkit-keyframes rotates{
  75%{opacity:0.7;}
  100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
}
@keyframes rotates{
  75%{opacity:0.7;}
  100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
}
@-webkit-keyframes rotateUp{
  0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
  50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
  100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
}
@keyframes rotateUp{
  0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
  50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
  100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
}
@-webkit-keyframes rotateDown{
  0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
  50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
}
@keyframes rotateDown{
  0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
  50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
}

  以上就是吃货loading的加载效果，希望可以帮助到大家！下载源码，请点击》》 loading.zip (1.29 KB, 下载次数: 0)

2021-6-25 10:32 上传

点击文件名下载附件
阅读权限: 90