CSS3实现Loading
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}html,body {background: #333333;}.demo {position: absolute;top: 50px;left: 50px;width: 200px;height: 200px;border: 1px solid #ffffff;margin: 150 auto;display: flex;justify-content: center;align-items: center;}.demo .shape {position: relative;width: 10px;height: 10px;display: inline-block;border: 1px solid #ffffff;margin: 0 5px;opacity: 0.5;}.demo .shape1 {background-color: blue;animation: animation1 1s ease infinite 0.0s;}.demo .shape2 {background-color: red;animation: animation1 1s ease infinite 0.25s;}.demo .shape3 {background-color: green;animation: animation1 1s ease infinite 0.5s;}.demo .shape4 {background-color: yellow;animation: animation1 1s ease infinite 0.75s;}/* 设置关键帧动画 0% ~ 100%*/@keyframes animation1 {0% {transform: scale(1);opcaity: 0.5;}50% {transform: scale(1.5);opcaity: 1;}100% {transform: scale(1);opcaity: 0.5;}}.demo2 {position: absolute;top: 50px;left: 300px;width: 200px;height: 200px;border: 1px solid #ffffff;margin: 150 auto;display: flex;justify-content: center;align-items: center;}.demo2 .con {position:absolute;width: 40px;height: 40px;/* border: 1px solid #ffffff; */}.demo2 .ball {position:absolute;top:40%;display: inline-block;width: 10px;height: 10px;background-color: #ffffff;border-radius: 50%;}.demo2 .ball1{left:0px;animation: animation2 1s ease infinite 0s;background-color:blue;}.demo2 .ball2{left:10px;background-color:red;}.demo2 .ball3{left:20px;background-color:green;}.demo2 .ball4{left:30px;animation: animation3 1s ease infinite 0.5s;background-color:yellow;}@keyframes animation2{0%{left:0px;top:40%;}25%{left:-20px;top:00%;}50%{left:0px;top:40%;}75%{left:0px;top:40%;}100%{left:0px;top:40%;}}@keyframes animation3{0%{left:30px;top:40%;}25%{left:50px;top:0%;}50%{left:30px;top:40%;}75%{left:30px;top:40%;}100%{left:30px;top:40%;}}.demo3{position:absolute;border:1px solid white;width:200px;height:200px;top:50px;left:550px;display:flex;justify-content:center;align-items:center;}.demo3 .box{position:absolute;width:30px;height:30px;left:30px;animation:moveBox 6s 0s linear infinite;}.demo3 .face{position:absolute;width:30px;height:30px;border-radius:50%;background-color:orange;}.demo3 .face-top{/* 上边剪切，左侧保留（宽度-右侧剪切），上面保留（高度-下面剪切），左侧剪切 */clip:rect(0,30px,15px,0);transform:rotateZ(-30deg);/* 关键帧名 动画时长 延时 动画类型 循环方式 过渡处理*/animation:moveFaceTop 0.5s 0s linear infinite alternate;}.demo3 .face-bottom{clip:rect(15px,30px,30px,0);transform:rotateZ(30deg);animation:moveFaceBottom 0.5s 0s linear infinite alternate;}.demo3 .eye{position:absolute;top:5px;left:10px;width:5px;height:5px;border-radius:50%;background-color:black;z-index:99;}.demo3 .beans{list-style:none;}.demo3 .bean{width:10px;height:10px;background-color:red;border-radius:50%;margin:0 5px;display:inline-block;}.demo3 .bean01{animation:moveBean 2s 0s linear infinite alternate;}.demo3 .bean02{animation:moveBean 2s 1s linear infinite alternate;}.demo3 .bean03{animation:moveBean 2s 2s linear infinite alternate;}@keyframes moveBean{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}@keyframes moveBox{0%{left:30px;transform:rotateY(0deg);}45%{left:150px;transform:rotateY(0deg);}50%{left:150px;transform:rotateY(180deg);}95%{left:30px;transform:rotateY(180deg);}100%{left:30px;transform:rotateY(0deg);}}@keyframes moveFaceTop{0%{transform:rotateZ(-30deg);}50%{transform:rotateZ(0deg);}100%{transform:rotateZ(-30deg);}}@keyFrames moveFaceBottom{0%{transform:rotateZ(30deg);}50%{transform:rotateZ(0deg);}100%{transform:rotateZ(30deg);}}</style></head><body><div class="demo"><div class="shape shape1"></div><div class="shape shape2"></div><div class="shape shape3"></div><div class="shape shape4"></div></div><div class="demo2"><div class="con"><div class="ball ball1"></div><div class="ball ball2"></div><div class="ball ball3"></div><div class="ball ball4"></div></div></div><div class="demo3"><div class="box"><!-- <img src="./img/cap.jpg" alt=""> --><div class="eye"></div><div class='face face-top'></div><div class='face face-bottom'></div></div><ul class='beans'><li class='bean bean01'></li><li class='bean bean02'></li><li class='bean bean03'></li></ul></div></body></html>
