-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathout.file.html
1 lines (1 loc) · 2.73 KB
/
out.file.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><style>@import url("./yekan/yekan.css");* {font-family: "Yekan";}.header-container {min-height: 600px;font-size: 1.5rem;}.line {width: 40px;height: 5px;margin-top: 5px;background-color: white !important;transition: transform 0.5s;}.change .line-1 {transform: rotate(45deg) translateX(8px);}.change .line-2 {display: none;}.change .line-3 {transform: rotate(-45deg) translateX(8px);}.navbar-header {font-size: 1.5rem;}.navbar-bg-normal {background-color: rgba(0, 0, 0, 0.5);}.navbar-bg-dark {background-color: rgba(0, 0, 0, 0.7);}.navbar-azma {transition: padding 0.5s;}.typing-text {direction: ltr;overflow: hidden;border-right: 2px solid #fff; white-space: nowrap; margin: 0 auto; letter-spacing: .0em; animation: typing 6s steps(55) infinite;}@keyframes typing {from {width: 0;}to {width: 100%;}}.loading-container img {filter: brightness(0.1500000);width: 100%;height: 100%;animation: fill-color 4s alternate-reverse infinite; }@keyframes fill-color {0% {filter: brightness(0.01500000);clip-path: inset(99% 0 0 0); }25% {filter: brightness(0.5);clip-path: inset(50% 0 0 0); }50% {filter: brightness(1);clip-path: inset(0 0 0 0); }75% {filter: brightness(0.15000000);clip-path: inset(100% 0 0 0); }100% {filter: brightness(1);clip-path: inset(0 0 0 0); }}@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");#animation-loading svg {font-family: "Russo One", sans-serif;width: 100%;height: 100%;}#animation-loading svg text {animation: stroke 5s infinite alternate;stroke-width: 2;stroke: #365FA0;}@keyframes stroke {0% {fill: rgba(72, 138, 204, 0);stroke: rgba(54, 95, 160, 1);stroke-dashoffset: 25%;stroke-dasharray: 0 50%;stroke-width: 2;}70% {fill: rgba(72, 138, 204, 0);stroke: rgba(54, 95, 160, 1);}80% {fill: rgba(72, 138, 204, 0);stroke: rgba(54, 95, 160, 1);stroke-width: 3;}100% {fill: rgba(72, 138, 204, 1);stroke: rgba(54, 95, 160, 0);stroke-dashoffset: -25%;stroke-dasharray: 50% 0;stroke-width: 0;}}#animation-loading {transition: opacity 1s;background-color: white;opacity: 1;}#animation-loading.hide {opacity: 0;}</style>OK<script>function showAnimation(duration = 5000) {const template = `<div id="animation-loading" style="z-index: 1040 !important;width: 100%; height: 100vh" class="wrapper position-fixed top-0 end-0 start-0 end-0"><svg style="z-index: 1050 !important;"><text x="50%" y="50%" dy=".100em" text-anchor="middle" class="text-center display-1"></text></svg></div>`;document.body.innerHTML = template + document.body.innerHTMLwindow.setTimeout(e => {document.querySelector("#animation-loading").classList.add("hide");window.setTimeout(event => {document.querySelector("#animation-loading").remove();}, 1100)}, duration)}</script></body></html>