Forum:
I'm trying to make a loading screen using this html code:
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://cdn.lowgif.com/medium/35533ca912e13f85-.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
And pasting it in general.
But
what this does, is it makes the page texture url the gif that loads,
and then it disappears from my blogs background? It doesn't use the url
actually in the code seen here.
what this does, is it makes the page texture url the gif that loads,
and then it disappears from my blogs background? It doesn't use the url
actually in the code seen here.
(this is my page texture code for ref- the background url part beforehand doesn't show even when I remove the page texture url)
--yourBackground: url(https://media1.tenor.com/m/zw3HWomJs3YAAAAd/darktide-adeptus-mechanicus.gif);
--pageTexture: url(https://media1.tenor.com/m/FMthBPk9zgwAAAAC/mechanicus-techpriest.gif);
--pageTexture: url(https://media1.tenor.com/m/FMthBPk9zgwAAAAC/mechanicus-techpriest.gif);
If
anyone has any insight on how I can make it so the loading screen is a
different gif to the page texture gif, I would be immensely grateful!!
And draw you something if you want!
anyone has any insight on how I can make it so the loading screen is a
different gif to the page texture gif, I would be immensely grateful!!
And draw you something if you want!
Report Topic
Permalink