前端JS页面加载特效丨蜂窝六边形加载动画

<script>var _a='_hs'+parseInt(10000+Math.random()*10000);$(function(){$('body').append('<style>@-webkit-keyframes '+_a+'{0%,20%,80%,100%{opacity:0;-webkit-transform:scale(0);transform:scale(0);}30%,70%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}}@keyframes '+_a+'{0%,20%,80%,100%{opacity:0;-webkit-transform:scale(0);transform:scale(0);}30%,70%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}}.'+_a+'{height:24px;position:relative;width:24px;left:50%;top:50%;transform:translate(-50%,-50%);}.'+_a+' div{-webkit-animation:'+_a+' 2.1s infinite backwards;animation:'+_a+' 2.1s infinite backwards;background:#f3f3f3;height:12px;margin-top:6px;position:absolute;width:24px;}.'+_a+' div:after,.'+_a+' div:before{content:"";border-left:12px solid transparent;border-right:12px solid transparent;position:absolute;left:0;right:0;}.'+_a+' div:after{top:-6px;border-bottom:6px solid #f3f3f3;}.'+_a+' div:before{bottom:-6px;border-top:6px solid #f3f3f3;}.'+_a+' div:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s;left:-28px;top:0;}.'+_a+' div:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s;left:-14px;top:22px;}.'+_a+' div:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s;left:14px;top:22px;}.'+_a+' div:nth-child(4){-webkit-animation-delay:.3s;animation-delay:.3s;left:28px;top:0;}.'+_a+' div:nth-child(5){-webkit-animation-delay:.4s;animation-delay:.4s;left:14px;top:-22px;}.'+_a+' div:nth-child(6){-webkit-animation-delay:.5s;animation-delay:.5s;left:-14px;top:-22px;}.'+_a+' div:nth-child(7){-webkit-animation-delay:.6s;animation-delay:.6s;left:0;top:0;}</style><div style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;background:#666"><div class="'+_a+'"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>')})</script>

<script>$(function(){$('.'+_a).parent().remove()})</script>