vue实现首屏加载等待动画 避免首次加载白屏尴尬的俩种实现方式
1.第一种效果代码
index.html中添加以下代码<style type="text/css">.first-loading-wrp {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 90vh;min-height: 90vh;}.first-loading-wrp>h1 {font-size: 30px;font-weight: bolder;}.first-loading-wrp .loading-wrp {display: flex;align-items: center;justify-content: center;padding: 98px;}.dot {position: relative;box-sizing: border-box;display: inline-block;width: 64px;height: 64px;font-size: 64px;transform: rotate(45deg);animation: antRotate 1.2s infinite linear;}.dot i {position: absolute;display: block;width: 28px;height: 28px;background-color: #1890ff;border-radius: 100%;opacity: 0.3;transform: scale(0.75);transform-origin: 50% 50%;animation: antSpinMove 1s infinite linear alternate;}.dot i:nth-child(1) {top: 0;left: 0;}.dot i:nth-child(2) {top: 0;right: 0;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}.dot i:nth-child(3) {right: 0;bottom: 0;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}.dot i:nth-child(4) {bottom: 0;left: 0;-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}@keyframes antRotate {to {-webkit-transform: rotate(405deg);transform: rotate(405deg);}}@-webkit-keyframes antRotate {to {-webkit-transform: rotate(405deg);transform: rotate(405deg);}}@keyframes antSpinMove {to {opacity: 1;}}@-webkit-keyframes antSpinMove {to {opacity: 1;}}</style><body><noscript><strong>非常抱歉！您当前浏览器不支持，请移步至更高版本！</strong></noscript><div id="app"><div class="first-loading-wrp"><div class="loading-wrp"><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div><h2>努力加载中...</h2></div></div></body>
2.第二种效果代码
<style type="text/css">#Loading {top: 50%;left: 50%;position: absolute;-webkit-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%);z-index: 100;}@-webkit-keyframes ball-beat {50% {opacity: 0.2;-webkit-transform: scale(0.75);transform: scale(0.75);}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}}@keyframes ball-beat {50% {opacity: 0.2;-webkit-transform: scale(0.75);transform: scale(0.75);}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}}.ball-beat>div {background-color: #279fcf;width: 15px;height: 15px;border-radius: 100% !important;margin: 2px;-webkit-animation-fill-mode: both;animation-fill-mode: both;display: inline-block;-webkit-animation: ball-beat 0.7s 0s infinite linear;animation: ball-beat 0.7s 0s infinite linear;}.ball-beat>div:nth-child(2n-1) {-webkit-animation-delay: 0.35s !important;animation-delay: 0.35s !important;}</style><body><noscript><strong>非常抱歉！您当前浏览器不支持，请移步至更高版本！</strong></noscript><div id="app"><div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div class="load_title">正在加载系统,请耐心等待<br><span>V1.3</span></div></div></div></body>
俩种效果图展示
