388 lines
22 KiB
HTML
388 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<link rel="icon" href="<%= BASE_URL %>favicon.jpg" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Ma+Shan+Zheng|Zhi+Mang+Xing|Liu+Jian+Mao+Cao|Ma+Shan+Zheng|Noto+Serif+SC|Zhi+Mang+Xing|Lakki+Reddy|Comfortaa|Pacifico&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/jquery-smoove/0.2.11/jquery.smoove.min.js"></script>
|
|
<link
|
|
href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<!-- <script src="https://cdn.bootcss.com/jquery-parallax/1.1.3/jquery-parallax-min.js"></script> -->
|
|
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
|
|
<title>百变皮影, Shadow Puppets</title>
|
|
<style>
|
|
#global_load {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
z-index: 9998;
|
|
opacity: 1;
|
|
clip-path: circle(100%);
|
|
-webkit-clip-path: circle(100%);
|
|
/* background: url(./home_wire.png) no-repeat center center; */
|
|
/* background-size: cover; */
|
|
transition: opacity 1s ease-in-out;
|
|
cursor: wait;
|
|
overflow: hidden;
|
|
background-color: #ede4cd;
|
|
transition: clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
-webkit-clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
#global_load .loader {
|
|
display: flex;
|
|
flex-flow: nowrap column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* background-color: rgba(170, 57, 57, 0.781); */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.loader .loader_content {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
display: flex;
|
|
flex-flow: nowrap column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.loader .loader_content .content_text {
|
|
display: inline-block;
|
|
color: #fff;
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
z-index: 1;
|
|
}
|
|
|
|
.loader .loader_content .content_text svg {
|
|
width: 4em;
|
|
height: 4em;
|
|
}
|
|
|
|
.loader .loader_content .circle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-color: rgba(204, 66, 57, 0.575);
|
|
background-color: #971919c5;
|
|
}
|
|
|
|
.loader .loader_content .loading_text {
|
|
position: absolute;
|
|
font-size: 2rem;
|
|
bottom: -100px;
|
|
left: 0;
|
|
right: 0;
|
|
top: auto;
|
|
margin: auto;
|
|
width: 300px;
|
|
height: 27px;
|
|
color: #111;
|
|
font-family: "Noto Serif SC", serif;
|
|
}
|
|
|
|
#global_load .bg_text {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
text-indent: -0.1em;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#global_load .bg_text .txt {
|
|
position: relative;
|
|
top: -30px;
|
|
color: #e6dcc3;
|
|
font-size: 26vw;
|
|
font-family: "Liu Jian Mao Cao", cursive;
|
|
/* 该字体存在加载问题 */
|
|
font-weight: 500;
|
|
letter-spacing: -0.001em;
|
|
white-space: nowrap;
|
|
/* transform: rotate(-6deg) translate3d(0, -.1em, 0); */
|
|
}
|
|
|
|
#u-loader {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
clip-path: circle(0%);
|
|
-webkit-clip-path: circle(0%);
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #722626;
|
|
display: flex;
|
|
flex-flow: nowrap row;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
transition: clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
-webkit-clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
#u-loader .loader-mask-container {
|
|
width: 40vw;
|
|
height: auto;
|
|
z-index: -1;
|
|
}
|
|
#u-loader .loader-bg-text {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
text-indent: -0.1em;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
color: #e6dcc3;
|
|
/* color:#115cbd; */
|
|
/* color: #111; */
|
|
font-size: 18vw;
|
|
font-weight: 400;
|
|
font-family: "Zhi Mang Xing", cursive;
|
|
/* font-family: "Liu Jian Mao Cao", cursive; */
|
|
}
|
|
::selection {
|
|
color:rgb(206, 57, 57);
|
|
background-color:transparent;
|
|
}
|
|
::-moz-selection {
|
|
color:rgb(206, 57, 57);
|
|
background-color:transparent;
|
|
}
|
|
|
|
::-webkit-selection{
|
|
color:rgb(206, 57, 57);
|
|
background-color:transparent;
|
|
|
|
}
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
function IsSafari() {
|
|
console.log("User Agent", navigator.userAgent);
|
|
let isSafari = /^((?!chrome|android).)*safari/i.test(
|
|
navigator.userAgent
|
|
);
|
|
return isSafari;
|
|
}
|
|
function IsFireFox(){
|
|
let userAgent = navigator.userAgent
|
|
if(userAgent.indexOf("Firefox")!==-1){
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
//随机添加svg到content_text下
|
|
// 暂时不用
|
|
function randomInsertSVG() {
|
|
let randNum = Math.floor(Math.random() * 2) + 1;
|
|
console.log(randNum);
|
|
let filename = "./loader_" + randNum + ".svg";
|
|
let req = new XMLHttpRequest();
|
|
let svgHack = document.getElementsByClassName("content_text");
|
|
console.log(svgHack);
|
|
req.open("GET", filename, true);
|
|
req.setRequestHeader("Content-Type", "text");
|
|
req.onreadystatechange = function() {
|
|
if (req.readyState === 4 && req.status !== 200) {
|
|
alert("Loading svg Failed");
|
|
// show the text
|
|
svgHack[0].innerHTML = "<h4>资源未找到<h4>";
|
|
}
|
|
};
|
|
req.onload = function() {
|
|
// insert svg into content_text
|
|
svgHack[0].innerHTML = req.responseText;
|
|
};
|
|
req.send();
|
|
}
|
|
function transitionToHome() {
|
|
// now, the page has already been loaded.
|
|
|
|
// do something when page loaded but have not executed transition process.
|
|
setTimeout(function() {
|
|
$(".loading_text").text("100");
|
|
// now, 2s after loaded done, time to transite into home page.
|
|
|
|
// remove all animated class
|
|
$(".animated").removeClass("animated");
|
|
// 缩小成圆圈切换页面
|
|
$("#global_load").css({
|
|
"clip-path": "circle(0%)",
|
|
"-webkit-clip-path": "circle(0%)"
|
|
});
|
|
window.loaddone = true; // 标记动作执行完成
|
|
// $("#global_load").fadeOut(1000)
|
|
}, 8000);
|
|
}
|
|
|
|
window.onload = transitionToHome;
|
|
|
|
// document.onmousemove = function(e){
|
|
// var w = $('#global_load').width()
|
|
// var h = $('#global_load').height()
|
|
// var eX = e.clientX
|
|
// var eY = e.clientY
|
|
// let rotateX = (-1+ 2 *eX/w)*10
|
|
// console.log(rotateX)
|
|
// let rotateY = -(-1 + 2 *eY/h)*10
|
|
// console.log(rotateY)
|
|
// $('#global_load').css({transform:'scale(0.85) rotateX('+rotateY+'deg) rotateY('+rotateX+'deg) perspective(1000)'})
|
|
// }
|
|
</script>
|
|
</head>
|
|
|
|
<body style="overflow-x:hidden;">
|
|
<noscript>
|
|
<strong
|
|
>We're sorry but front doesn't work properly without JavaScript enabled.
|
|
Please enable it to continue.</strong
|
|
>
|
|
</noscript>
|
|
<div class="wrapper">
|
|
<div id="global_load">
|
|
<div class="loader">
|
|
<div class="loader_content">
|
|
<div class="content_text zoomIn animated">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 519.68 643.03"
|
|
>
|
|
<defs>
|
|
<style>
|
|
.path {
|
|
fill: none;
|
|
stroke: #fff;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
.path {
|
|
stroke-width: 5px;
|
|
}
|
|
</style>
|
|
</defs>
|
|
<title>正式效果</title>
|
|
<g id="图层_2" data-name="图层 2">
|
|
<g id="图层_19" data-name="图层 19">
|
|
<g id="皮影-张飞">
|
|
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="circle zoomIn animated fast"></div>
|
|
<div class="loading_text fadeInUpBig faster animated">
|
|
请稍等
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg_text">
|
|
<div class="txt fadeInUpBig faster animated">
|
|
百变皮影
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="u-loader">
|
|
<!-- 备用的全局切换效果 -->
|
|
<div class="loader-mask-container">
|
|
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 473.22 576.21"><defs><style>.u-load{fill:none;stroke:#111;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title>正在加载2_refined</title><g id="图层_2" data-name="图层 2"><g id="图层_14_复制" data-name="图层 14_复制"><g id="正在加载2_refined"><path class="u-load" d="M25.51,212.58c4-.79,2.15-19.9,4-38,1.78-17.37,6.58-30,10-39,7.7-20.25,17.47-34,26-46,6.55-9.19,14.65-20.55,28-33,21.63-20.17,42.85-30,54-35a221.45,221.45,0,0,1,52-16,192.07,192.07,0,0,1,44-4,198.51,198.51,0,0,1,28,3c12.62,2.06,30.09,5,51,14a196.37,196.37,0,0,1,25,13,194.32,194.32,0,0,1,34,25,177.55,177.55,0,0,1,30,36c4.88,7.88,7.83,14.15,12,23a271.74,271.74,0,0,1,14,35c3.14,9.86,6.55,20.55,8,34,1.19,11,1.79,16.56.61,22.68-.51,2.64-1.57,6.91-.61,7.32,1.51.65,4.93-9.6,11-10,4.16-.27,7.62,4.2,9,6,3.1,4,4.13,8.32,5,16a124.28,124.28,0,0,1,1,24c-.43,7.39-.88,15.18-4,25a81.37,81.37,0,0,1-8,18c-3.82,6.32-5.8,7.54-9,14a63.39,63.39,0,0,0-5,14c-2.07,9.24-.34,12.05-2,21a65.87,65.87,0,0,1-5,15,37.36,37.36,0,0,1-5,9c-2.65,3.37-4.17,3.85-5,4-2.76.5-4.21-1.61-6-1-2.94,1-3,8.12-3,9-.17,11.41-3.23,22.62-4,34-.8,11.87-3.83,20-9,34a183.56,183.56,0,0,1-27,48c-12.2,15.74-23.67,25.35-34,34-10.62,8.9-21.86,18.21-39,27a174.15,174.15,0,0,1-37,14c-9.82,2.46-23.29,5.82-41,5-21.95-1-38-7.89-50-13a195.13,195.13,0,0,1-31-17,222.83,222.83,0,0,1-40-35c-10-11.05-22.7-25.2-33-47a192.47,192.47,0,0,1-12-33c-1.1-4.3-6.43-23.41-7-37-.06-1.47-.37-4.31-1-10-1-8.88-1.42-10.76-3-12-2.8-2.2-5.56.45-10-1-5.66-1.84-8.22-8.44-10-13-.78-2-2.11-5.91-3-22-.7-12.74,0-12.87-1-17-1.32-5.52-2.79-6.24-10-19-7.91-14-10.63-21.08-12-25a70.09,70.09,0,0,1-3-11,78.15,78.15,0,0,1-1-15c.14-9.71,1.44-15.51,4-27,.63-2.81,1.6-6.85,5-10,1.06-1,3.18-2.93,6-3C21.34,207.47,23.3,213,25.51,212.58Z"/><path class="u-load" d="M128,529.08c-4.55-4.92-7.7-14.62-14-34a85.13,85.13,0,0,1-4-18c-.55-5.18-2.07-22,6-39a115.06,115.06,0,0,1,7-12c5.15-8.18,7.69-10.94,10-13,3-2.7,3.84-2.58,7-5,10.76-8.23,15-20.05,16-23,2.22-6.45.48-5.84,3-14,2.26-7.31,4.25-13.77,10-19,.68-.61,10.14-9,18-6a8.26,8.26,0,0,1,4,3c2.71,4.05.3,9.87-1,13-2.66,6.41-5.07,6.31-7,12a21.07,21.07,0,0,0-1,11,19.84,19.84,0,0,0,11,14c5.82,2.64,13.19,2.24,14,0,.89-2.45-6.67-5.51-6-10,.39-2.56,3.33-4.74,6-5,2.86-.28,4.64,1.7,9,5,4,3,8.43,6.37,13,8,1.44.51,8.85,3,16,0,6.83-2.84,6.86-7.92,16-12,5.35-2.39,7.26-1.5,8-1,2,1.34,2.56,4.56,2,7-1.1,4.83-6.54,6.29-6,8,.64,2,8.5,1.06,9,1,3.75-.47,7.68-1,11-4s4.1-6.78,5-11c.65-3,1.66-7.76,0-13-1.73-5.5-4.47-5.5-7-12-1.38-3.56-3.12-8-1-11,2.9-4.05,11.05-2.23,12-2,5.58,1.32,8.7,5.38,14,12a21,21,0,0,1,4,7c.7,2.2.45,2.87,1,6a51.74,51.74,0,0,0,3,10,62.65,62.65,0,0,0,4,9c2.74,5,5.57,8.14,9,12,4,4.48,6.13,6.14,9,9a86.31,86.31,0,0,1,16,22,81,81,0,0,1,7,21,83.23,83.23,0,0,1,1,24c-1,9.49-3.34,16.32-6,24-.15.43-2.43,6-7,17-1.6,3.88-2.44,5.87-4,8-1.81,2.48-4.54,4.66-10,9-.39.32-.31.25-8,6-4.95,3.7-5.67,4.25-6,4-1.09-.83,5.27-8.2,9-19,3-8.63,3-15.7,3-28,0-8.63,0-14.8-2-23-1.45-5.92-3.27-13.32-9-21a49.41,49.41,0,0,0-21-16c-5.9-2.37-13-2.94-27-4-11.39-.86-14.83-2.2-20-1-7.44,1.73-11.16,2.6-14,5-1,.85-2.31,2.16-4,2-2.28-.22-2.87-2.91-6-5-1-.7-2.13-1.16-6-2a71,71,0,0,0-13-2c-7.63-.34-13.52.91-23,3s-14.34,3.16-20,6a45.44,45.44,0,0,0-14,10c-7.33,8-9.5,16.88-11,23a84.17,84.17,0,0,0-2,15,134.4,134.4,0,0,0,0,20c.62,8.29,1,13,3,19,1.43,4.22,3.28,9.73,8,15,2.72,3,5.21,4.7,5,5-.37.52-8-4.1-15-9C134.69,534.93,131,532.35,128,529.08Z"/><path class="u-load" d="M170,441.08a44,44,0,0,1,18,3c3.18,1.29,3.88,2.05,10,5a121.45,121.45,0,0,0,14,6c8.18,2.71,14.83,2.85,22,3a94.52,94.52,0,0,0,22-2,68.84,68.84,0,0,0,13-4c7.41-3.16,6.66-4.49,13-7a42.5,42.5,0,0,1,19-3,38.49,38.49,0,0,1,6,1"/><path class="u-load" d="M35,177.08c-3.95,7.74-4,14.8-4,28,0,1.92,0,8.65,1,18,.23,2.27.85,8,4,25,2.25,12.12,3.37,18.18,5,25,2.54,10.58,5.11,18.9,7,25,5,16.2,6.57,18.15,8,26,.93,5.09-.1,3.25,1,23a77.19,77.19,0,0,1,0,13c-.44,4.58-.85,9-2,12a17.84,17.84,0,0,0-1,4,18.83,18.83,0,0,0-.09,3c0,.62-.06.85.09,1,.69.78,3.73-.85,4-1,4.65-2.5,6.2-12.15,7-18,1.48-10.72,2.21-16.08,2-22-.26-7.33-1.51-13.55-4-26-1.82-9.11-2.48-10.52-3-16-.19-2.08-.21-3.09,0-18,.14-9.74.25-14.68,2-18a17.36,17.36,0,0,1,8-8c1.51-.68,4.18-1.57,10-1a49.85,49.85,0,0,1,17,5,115,115,0,0,1,22,14c.62.48.57.45,16,14,7.45,6.54,11.29,9.89,17,14,5,3.58,7.47,5.38,11,7,4.09,1.88,11,5.07,20,4a29.09,29.09,0,0,0,15-6c7-5.57,9.1-12.9,10-16,1.74-6,1.43-11.09,1-18a60.91,60.91,0,0,0-1.38-10.9c-.88-3.88-2-6.92-1.62-7.1.62-.27,2.57,7.18,9,11,1.66,1,5.43,3.22,9,2,3.41-1.17,3.7-4.5,9-7,2.44-1.15,3.64-1,4-1,2.24.27,3,1.89,6,4a17.21,17.21,0,0,0,6,3,15.2,15.2,0,0,0,14.65-5.28c1.61-2.05,2-3.81,2.35-3.72.55.15-.5,4.65-1,10a79.4,79.4,0,0,0,0,13c.41,7.18.61,10.76,2,15,1.26,3.84,2.74,8.36,7,12s8.68,4.38,12,5a33.78,33.78,0,0,0,12,0c2.52-.44,6.47-1.43,16-7a162,162,0,0,0,19-13c6.51-5.17,5.86-5.38,14-12,8.3-6.74,14.28-10.83,16-12a108.5,108.5,0,0,1,15-9c6.26-3,10.81-5.11,17-5,3.14.06,7.42.13,11,3,1,.8,3.62,3.16,6,14a82.81,82.81,0,0,1,2,15c.19,12.54-1.77,19.65-5,41-2.35,15.53-2.41,19-2,23a82.91,82.91,0,0,0,5,20c.93,2.47,3.87,11.27,5,11,1-.23-.37-6.94-1-18a166.61,166.61,0,0,1,0-21c.32-4.13,1-8.24,6-27,1.28-4.75,3.37-11.45,7-25,1-3.88,4-15,7-29,3.39-15.69,5.09-23.53,6-33,1.44-14.92.95-25.33,0-33-1.28-10.38-3.18-15.36-5-19-2.25-4.49-5.51-11-13-15a27.24,27.24,0,0,0-15-3c-6.08.54-10.15,3-15,6a65.86,65.86,0,0,0-15,13c-4.6,5.11-4.19,5.89-9,11-2.52,2.68-4.33,4.26-11,10-9.86,8.48-10.49,9.65-14,12a70.58,70.58,0,0,1-11,6,78,78,0,0,1-15,5c-3.5.77-4,.61-17,2-8.58.92-12.91,1.39-15,2-4.29,1.25-11,3.22-16,9-.52.61,0,0-6,9a78.57,78.57,0,0,1-6,8,24.61,24.61,0,0,1-4,4c-1.92,1.44-4.88,3.64-8,3-1.82-.37-2.88-1.58-5-4a22.55,22.55,0,0,1-5-9c-.62-2.28-.67-4-1-4-.49,0,0,3.88-2,8a16.8,16.8,0,0,1-5,6c-2,1.59-3.65,2.87-6,3-3,.16-5.24-1.61-7-3-.92-.72-2.53-2.13-5-6-3.14-4.92-3.52-7.31-5-10-4-7.31-11.92-10.4-16-12-4.76-1.86-8.65-2.26-16-3s-8.29-.07-14-1a68.28,68.28,0,0,1-14-4,95.15,95.15,0,0,1-18-9,102.61,102.61,0,0,1-16-13c-3.32-3.28-5.49-5.85-9-10-7.74-9.17-8.23-11.12-14-17s-9.21-7.88-12-9a31.08,31.08,0,0,0-9-2c-4.78-.49-10.91-1.13-17,2-3.56,1.83-5.65,4.19-9,8A50,50,0,0,0,35,177.08Z"/><path class="u-load" d="M135,27.08a305.84,305.84,0,0,1,20,33c5.62,10.76,9.38,19.53,13,28,3.24,7.58,6.93,16.24,11,28,5,14.47,8.09,26.4,9,30,2.28,9,2.92,13,6,24a159.55,159.55,0,0,0,6,18c1.83,4.51,2.62,7.57,5,11,4.1,5.89,6.35,7.46,8,8a8.56,8.56,0,0,0,6,0c2-.86,3.26-3,5-11a86.2,86.2,0,0,0,2-12c.68-12.31.19-22.79,0-28-.43-12.08-.13-21.51,0-25a326.72,326.72,0,0,1,3-33c.69-5.1.38-1.76,4-24,2.35-14.41,3-19,4-19,1.27,0,2,7.45,4,23,3.7,28.76,4.12,25.89,5,37,.76,9.53.84,18.35,1,36,.05,5.23-.24,12,0,22,.4,16.6,1.23,11.9,1,18a28.61,28.61,0,0,0,1,9c.86,3.06,1.64,5.82,4,7,3.5,1.75,8-1.29,9-2,3-2.07,4.13-4.84,6-9,6.07-13.53,4.77-9.09,7-15,2.62-6.92,3.49-10.56,7-23,.65-2.28,3.85-13.58,7-24,2.1-6.93,4.26-14.05,7-22,3.43-9.94,7-18.43,14-35,9.69-22.94,12.71-28.61,14-31a214.47,214.47,0,0,1,13-21"/><path class="u-load" d="M110,238.08c.84-2.05,7.15.37,20,0,9.05-.26,9.59-1.57,21-2,7.74-.29,11.72-.41,17,1a34.46,34.46,0,0,1,14,7c2.69,2.27,4.45,4.86,8,10,3.39,4.91,7.31,10.59,6,12-.55.6-1.8-.45-5-1a24.8,24.8,0,0,0-7,0c-4,.35-8,.6-12,1-7.34.74-11,1.11-13,1-4.87-.27-9-2.18-17-6a131,131,0,0,1-19-11C116,245.17,109.09,240.34,110,238.08Z"/><path class="u-load" d="M364.19,238.08c-.84-2.05-7.15.37-20,0-9.06-.26-9.59-1.57-21-2-7.74-.29-11.72-.41-17,1a34.46,34.46,0,0,0-14,7c-2.69,2.27-4.46,4.86-8,10-3.39,4.91-7.31,10.59-6,12,.55.6,1.8-.45,5-1a24.8,24.8,0,0,1,7,0c4,.35,8,.6,12,1,7.34.74,11,1.11,13,1,4.87-.27,9-2.18,17-6a131,131,0,0,0,19-11C358.2,245.17,365.11,240.34,364.19,238.08Z"/><path class="u-load" d="M296,241.08c-.59,1.72-3.09,9.57,1,17a15.68,15.68,0,0,0,7,7c4.55,2.11,8.92,1,13,0s7.41-1.85,10-5c2.47-3,2.72-6.31,3-10,.23-3,.72-9.48-3-12a7.8,7.8,0,0,0-3-1,48.51,48.51,0,0,0-11-1"/><path class="u-load" d="M177.87,241.08c.59,1.72,3.09,9.57-1,17a15.68,15.68,0,0,1-7,7c-4.55,2.11-8.92,1-13,0s-7.41-1.85-10-5c-2.47-3-2.72-6.31-3-10-.23-3-.72-9.48,3-12a7.72,7.72,0,0,1,3-1,48.51,48.51,0,0,1,11-1"/><path class="u-load" d="M113,77.08c4.95,2.25,12.29,8.8,19,41,2.35,11.24,1.27,9.56,3,17,2.06,8.83,6.15,25.67,18,42a120.38,120.38,0,0,0,28,27,134.24,134.24,0,0,1,17,13c6.17,5.57,9.29,8.44,11,13,1.29,3.42,1.3,6.09,4,9,.83.89,3.66,3.94,8,4,5.38.07,8.66-4.51,9-5,1.72-2.48,1.84-5.36,2-11,0-1,.31-10.85-1-11-.66-.08-.28,5.82-4,12-1.48,2.47-2.82,4.69-5,5-2,.29-3.84-1.18-10-8-5.55-6.14-7-8-7-8-4.21-6.32-9.47-11.89-14-18-12.33-16.63-12.3-14.14-19-24-4.42-6.51-10.38-15.4-15-28-2.47-6.74-4-13.16-7-26-2.74-11.64-3.17-15.57-6-22-4.67-10.61-7.92-14.66-11-17a33.34,33.34,0,0,0-10-5c-6.71-2.28-13.82-2.75-14-2C108.91,75.54,111.44,76.37,113,77.08Z"/><path class="u-load" d="M362.05,75.08c-4.95,2.25-12.28,8.8-19,41-2.34,11.24-1.26,9.56-3,17-2.05,8.83-6.14,25.67-18,42a120.17,120.17,0,0,1-28,27,135,135,0,0,0-17,13c-6.17,5.57-9.29,8.44-11,13-1.28,3.42-1.29,6.09-4,9-.83.89-3.66,3.94-8,4-5.37.07-8.66-4.51-9-5-1.72-2.48-1.83-5.36-2-11,0-1-.31-10.85,1-11,.67-.08.28,5.82,4,12,1.49,2.47,2.83,4.69,5,5,2,.29,3.84-1.18,10-8,5.55-6.14,7-8,7-8,4.22-6.32,9.47-11.89,14-18,12.34-16.63,12.31-14.14,19-24,4.43-6.51,10.38-15.4,15-28,2.47-6.74,4-13.16,7-26,2.74-11.64,3.18-15.57,6-22,4.67-10.61,7.93-14.66,11-17a33.46,33.46,0,0,1,10-5c6.71-2.28,13.83-2.75,14-2C366.16,73.54,363.63,74.37,362.05,75.08Z"/><path class="u-load" d="M38,143.08c3.12-2.37,20.72-15.29,39-10,7.09,2,12.95,6.46,15,8,4.89,3.68,6.88,6.45,16,18,9.32,11.8,14.06,17.78,18,22a138.84,138.84,0,0,0,16,15,144.32,144.32,0,0,0,22,14c1,.48,1.89.91,1.89.91a65.49,65.49,0,0,0,8.11,3.09c3.12.95,9.75,2.68,10,2s-7.36-3.28-16-8a109.73,109.73,0,0,1-22-16c-9.41-8.57-14.93-16.33-21-25-12.7-18.13-18-31-18-31-1.87-4-3.3-7.52-7-11-7.14-6.72-16.65-7.67-20-8a43.73,43.73,0,0,0-14,1,52.87,52.87,0,0,0-19,8,49.19,49.19,0,0,0-5,4"/><path class="u-load" d="M434,143.08c-3.12-2.37-20.72-15.29-39-10-7.09,2-12.91,6.51-15,8-7,5-6.88,6.45-16,18-9.32,11.8-14.06,17.78-18,22a138.84,138.84,0,0,1-16,15,144.32,144.32,0,0,1-22,14c-1,.48-1.89.91-1.89.91a65.49,65.49,0,0,1-8.11,3.09c-3.12.95-9.75,2.68-10,2s7.36-3.28,16-8a109.73,109.73,0,0,0,22-16c9.41-8.57,14.93-16.33,21-25,12.7-18.13,18-31,18-31,1.87-4,3.3-7.52,7-11,7.14-6.72,16.65-7.67,20-8a43.73,43.73,0,0,1,14,1,55,55,0,0,1,19,8,16.43,16.43,0,0,1,5,4"/></g></g></g></svg> -->
|
|
</div>
|
|
<div class="loader-bg-text">
|
|
百变皮影
|
|
</div>
|
|
</div>
|
|
<div id="app"></div>
|
|
</div>
|
|
<!-- built files will be auto injected -->
|
|
<script>
|
|
// randomInsertSVG()
|
|
// load loader
|
|
const svgPath = document.querySelectorAll(".path");
|
|
|
|
const svgText = anime({
|
|
targets: svgPath,
|
|
loop: true,
|
|
direction: "alternate",
|
|
strokeDashoffset: [anime.setDashoffset, 0],
|
|
easing: "easeInOutSine",
|
|
duration: 1000,
|
|
delay: (el, i) => {
|
|
return i * 500;
|
|
}
|
|
});
|
|
|
|
const progressNum = document.querySelectorAll('.loading_text')
|
|
anime({
|
|
targets: progressNum,
|
|
direction:'normal',
|
|
innerText:[0, 99],
|
|
round:1,
|
|
duration:8000,
|
|
easing:'linear'
|
|
})
|
|
// u-load
|
|
// const svgPath2 = document.querySelectorAll(".u-load");
|
|
|
|
// const svgText2 = anime({
|
|
// targets: svgPath2,
|
|
// loop: true,
|
|
// direction: "alternate",
|
|
// strokeDashoffset: [anime.setDashoffset, 0],
|
|
// easing: "easeInOutSine",
|
|
// duration: 1000,
|
|
// delay: (el, i) => {
|
|
// return i * 500;
|
|
// },
|
|
|
|
// });
|
|
</script>
|
|
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
|
|
</body>
|
|
</html>
|