jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

startAnimation

Browse Source
This commit is contained in:
ckcz123 2019-10-27 15:32:56 +08:00
parent 0b50a35d68
commit efd4e28e2a
3 changed files with 85 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -16,6 +16,32 @@
<link type='text/css' href='styles.css' rel='stylesheet'> <link type='text/css' href='styles.css' rel='stylesheet'>
</head> </head>
<body> <body>
<div id='startImageBackgroundDiv'>
<div id='startImageDiv'></div>
<img id='startImageLogo' />
</div>
</div>
<script>
(function () {
var startImageBackgroundDiv = document.getElementById('startImageBackgroundDiv');
var startImageLogo = document.getElementById('startImageLogo');
var startImageDiv = document.getElementById('startImageDiv');
startImageLogo.onload = function () {
startImageBackgroundDiv.style.display = 'block';
var onAnimationEnd = function () {
startImageBackgroundDiv.style.display = 'none';
startImageLogo.classList.remove("startImageAnimation");
startImageDiv.classList.remove("startImageDivAnimation");
}
startImageDiv.addEventListener("webkitAnimationEnd", onAnimationEnd);
startImageDiv.addEventListener("animationend", onAnimationEnd);
startImageLogo.classList.add("startImageAnimation");
startImageDiv.classList.add("startImageDivAnimation");
}
startImageLogo.onerror = function () {}
startImageLogo.src = "logo.png";
})();
</script>
<div id='gameGroup'> <div id='gameGroup'>
<p id='mainTips'>请稍后...</p> <p id='mainTips'>请稍后...</p>
<img id='musicBtn'> <img id='musicBtn'>

BIN
logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

60
styles.css
View File

@ -422,4 +422,62 @@ p#name {
100% { 100% {
transform: rotate(45deg) translate(-3px, -3px); transform: rotate(45deg) translate(-3px, -3px);
} }
} }
#startImageBackgroundDiv {
display: none;
width: 100%;
height: 100%;
position: fixed;
z-index: 10000;
}
#startImageDiv {
width: 100%;
height: 100%;
position: fixed;
background: black;
opacity: 1;
}
#startImageLogo {
opacity: 0;
max-width: 60%;
max-height: 60%;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.startImageAnimation {
-webkit-animation: startImage 4s ease-in-out 1s alternate 1;
animation: startImage 4s ease-in-out 1s alternate 1;
}
@-webkit-keyframes startImage {
0% { opacity: 0; }
60% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes startImage {
0% { opacity: 0; }
60% { opacity: 1; }
100% { opacity: 0; }
}
.startImageDivAnimation {
-webkit-animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
}
@-webkit-keyframes startImageDivDisappear {
0% { opacity: 1 }
100% { opacity: 0 }
}
@keyframes startImageDivDisappear {
0% { opacity: 1 }
100% { opacity: 0 }
}