tell user animation is skippable
This commit is contained in:
parent
556e471281
commit
74a13cb80b
2 changed files with 25 additions and 1 deletions
|
|
@ -42,7 +42,7 @@ li {
|
||||||
|
|
||||||
/* lil text on the borders :3 */
|
/* lil text on the borders :3 */
|
||||||
|
|
||||||
.title, .credit {
|
.title, .credit, .skip-notice {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-color: var(--c-bg);
|
background-color: var(--c-bg);
|
||||||
color: var(--c-title);
|
color: var(--c-title);
|
||||||
|
|
@ -63,6 +63,14 @@ li {
|
||||||
color: var(--c-fg)
|
color: var(--c-fg)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.skip-notice {
|
||||||
|
bottom: 0;
|
||||||
|
right: 8px;
|
||||||
|
color: var(--c-fg);
|
||||||
|
background-color: transparent;
|
||||||
|
font-weight: normal
|
||||||
|
}
|
||||||
|
|
||||||
/* here are some @media rules to choose when to display ascii art */
|
/* here are some @media rules to choose when to display ascii art */
|
||||||
|
|
||||||
.ascii, .splash {
|
.ascii, .splash {
|
||||||
|
|
@ -201,4 +209,19 @@ main {
|
||||||
html {
|
html {
|
||||||
animation: 1.5s 1 linear splash-bg;
|
animation: 1.5s 1 linear splash-bg;
|
||||||
animation-delay: 3s
|
animation-delay: 3s
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes splash-fg {
|
||||||
|
0%, 100% {
|
||||||
|
color: var(--c-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-notice {
|
||||||
|
animation-duration: 4.5s, 1.5s;
|
||||||
|
animation-iteration-count: 1, 1;
|
||||||
|
animation-timing-function: linear, linear;
|
||||||
|
animation-name: appear, splash-fg;
|
||||||
|
animation-delay: 0s, 3s;
|
||||||
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -64,6 +64,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</main></div>
|
</main></div>
|
||||||
<span class="credit skip"><a href="https://girlkissing.tips">site by Magdalunaa :3</a></span>
|
<span class="credit skip"><a href="https://girlkissing.tips">site by Magdalunaa :3</a></span>
|
||||||
|
<span class="skip-notice skip">Click to skip</span>
|
||||||
</body>
|
</body>
|
||||||
<script src="/assets/main.js"></script>
|
<script src="/assets/main.js"></script>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue