app直播源代码，等待时的加载动画（交错加载动画）

<!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title></title><br><style type="text/css"><br>*{<br>margin:0;<br>padding:0;<br>}<br>html,body{<br>width:100%;<br>height:100%;<br>}<br>.box{<br>background:black;<br>width:100%;<br>height:100%;<br>display:flex;<br>align-items:center;<br>justify-content:center;<br>}<br>.cssload-loader {<br>position: relative;<br>width: 62px;<br>height: 62px;<br>}<br>.cssload-inner {<br>position: absolute;<br>width: 100%;<br>height: 100%;<br>box-sizing: border-box;<br>border-radius: 50%;<br>}<br>.cssload-inner.cssload-one {<br>left: 0%;<br>top: 0%;<br>animation: cssload-rotate-one 1.15s linear infinite;<br>border-bottom: 3px solid #fff;<br>}<br>.cssload-inner.cssload-two {<br>right: 0%;<br>top: 0%;<br>animation: cssload-rotate-two 1.15s linear infinite;<br>border-right: 3px solid #fff;<br>}<br>.cssload-inner.cssload-three {<br>right: 0%;<br>bottom: 0%;<br>animation: cssload-rotate-three 1.15s linear infinite;<br>border-top: 3px solid #fff;<br>}<br>@keyframes cssload-rotate-one {<br>0% {<br>transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);<br>}<br>100% {<br>transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);<br>}<br>}<br>@keyframes cssload-rotate-two {<br>0% {<br>transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);<br>}<br>100% {<br>transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);<br>}<br>}<br>@keyframes cssload-rotate-three {<br>0% {<br>transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);<br>}<br>100% {<br>transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);<br>}<br>}<br></style><br></head><br><body><br><div class="box"><br><div class="cssload-loader"><br><div class="cssload-inner cssload-one"></div><br><div class="cssload-inner cssload-two"></div><br><div class="cssload-inner cssload-three"></div><br></div><br></div><br></body><br></html>