<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="" type="image/png" />
<link rel="apple-touch-icon" href="" />
<title></title>
<meta
name="viewport"
content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="manifest" id="manifest-placeholder" href="/static/mainfest.json" />
<style>
* {
margin: 0;
padding: 0;
}
.loading-screen {
overflow: hidden;
position: relative;
z-index: 999;
background-color: #fff;
width: 100vw;
height: 100vh;
}
.loadBox {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%);
font-size: 40px;
}
.loader {
width: 140px;
height: 16px;
-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/12.5%; /* 使用遮罩效果，调整为 8 步的比例 */
background: linear-gradient(180deg, green 0%, green 100%) 0/0% no-repeat #ddd; /* 背景渐变 */
animation: cartoon 6s infinite steps(9); /* 修改动画步数为 8 */
margin-top: 40px; /* 上边距 */
}
@keyframes cartoon {
100% {
background-size: 112.5%;
}
}
/*骰子动画*/
.horizontal {
animation: rotate 1s linear infinite;
标签：scale,linear,50%,首屏,width,vue,background,size,加载 From： https://blog.csdn.net/s____even/article/details/142092889