SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
<head>
<style> 

.loading-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading
{

	width: 200px;
    height: 327px;
    border: 10px solid #72623b;
    border-radius: 80px;
    position: relative;
    overflow: hidden;
}

.loading .cloud1 {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24%;
  background: #b7aa97;
}

.loading .cloud1::before {
  display: block;
  position: absolute;
  content: '';
  top: -8px;
  left: -8px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #b7aa97;
  z-index: 1;
  box-shadow: 40px -14px 0 0 #b7aa97, 94px -4px 0 0 #b7aa97, 138px -24px 0 0 #b7aa97, 148px -24px 0 0 #b7aa97, 200px -24px 0 0 #b7aa97, 290px 0 0 0 #b7aa97;
  animation: move 5s linear infinite;
}

.loading .cloud2 {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: 24%;
  width: 100%;
  height: 20%;
  background: #b7aa97;
  opacity: 0.5;
  z-index: 1;
}

.loading .cloud2::before {
  display: block;
  position: absolute;
  content: '';
  top: -8px;
  left: -8px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #b7aa97;
  z-index: 2;
  box-shadow: -60px -10px 0 0 #b7aa97,-30px -24px 0 0 #b7aa97,0px -14px 0 0 #b7aa97, 40px -14px 0 0 #b7aa97, 94px -4px 0 0 #b7aa97, 138px -24px 0 0 #b7aa97, 148px -24px 0 0 #b7aa97, 200px -24px 0 0 #b7aa97, 290px 0 0 0 #b7aa97;
  animation: move1 5s linear infinite;
}


@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
  	transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes move1 {
  0% {
    transform: translateX(0);
  }
  50% {
  	transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

</style>
</head>
<body>

<div class="loading-wrap">
<div class="loading">
	<div class="cloud1"></div>
    <div class="cloud2"></div>
</div>
</div>


</body>
</html>