Проблема с синхронизацией вращения, которая не появляется при загрузке фонового изображения. ⇐ Jquery

[Гость]

Код: Выделить всё

[*]  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
Game Cards App



#main-content {
display: none;
}

* {
box-sizing: border-box;
}

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%);
animation: shine 4s linear infinite;
color: white;
font-family: "Lato";
-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;
}

ul {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 15px;
text-align: center;
overflow-x: hidden;
}

.card {
float: left;
position: relative;
width: calc(33.33% - 30px + 9.999px);
height: 340px;
margin: 0 30px 30px 0;
perspective: 1000;

}
.card:first-child .card__front {
background:#5271C2;
}

.card__front img {
width: 100%;
height: 100%;
object-fit: cover;
}

.card:first-child .card__num {
text-shadow: 1px 1px rgba(52, 78, 147, 0.8)
}
.card:nth-child(2) .card__front {
background:#35a541;
}
.card:nth-child(2) .card__num {
text-shadow: 1px 1px rgba(34, 107, 42, 0.8);
}
.card:nth-child(3) {
margin-right: 0;
}
.card:nth-child(3) .card__front {
background: #bdb235;
}
.card:nth-child(3) .card__num {
text-shadow: 1px 1px rgba(129, 122, 36, 0.8);
}
.card:nth-child(4) .card__front {
background: #db6623;
}
.card:nth-child(4) .card__num {
text-shadow: 1px 1px rgba(153, 71, 24, 0.8);
}
.card:nth-child(5) .card__front {
background: #3e5eb3;
}
.card:nth-child(5) .card__num {
text-shadow: 1px 1px rgba(42, 64, 122, 0.8);
}
.card:nth-child(6) .card__front {
background: #aa9e5c;
}
.card:nth-child(6) .card__num {
text-shadow: 1px 1px rgba(122, 113, 64, 0.8);
}
.card:last-child {
margin-right: 0;
}
.card__flipper {
cursor: pointer;
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
border: 3.5px solid rgba(255, 215, 0, 0.6); /* Altın sarısı rengi ve parıltılı efekt */
background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); /* Arkaplan gradienti */
}
.card__front, .card__back {
position: absolute;
backface-visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 340px;
}
.card__front {
transform: rotateY(0);
z-index: 2;
overflow: hidden;
}
.card__back {
transform: rotateY(180deg) scale(1.1);
background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934);
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}
.card__back span {
font-weight: bold; /* Metni kalın yap */
color: white;  /* Beyaz renk */
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card__name {
font-size: 32px;
line-height: 0.9;
font-weight: 700;
}
.card__name span {
font-size: 14px;
}
.card__num {
font-size: 100px;
margin: 0 8px 0 0;
font-weight: 700;
}
@media (max-width: 700px) {
.card__num {
font-size: 70px;
}
}
@media (max-width: 700px) {
.card {
width: 100%;
height: 290px;
margin-right: 0;
float: none;
}
.card .card__front,
.card .card__back {
height: 290px;
overflow: hidden;
}
}

/* Demo */
main {
text-align: center;
}
main h1, main p {
margin: 0 0 12px 0;
}
main h1 {
margin-top: 12px;
font-weight: 300;
}

.fa-github {
color: white;
font-size: 50px;
margin-top: 8px; /* Yukarıdaki boşluğu ayarlayın */
}

.tm-container {
display: flex;
justify-content: center;
align-items: center; /* Eğer dikey merkezleme de istiyorsanız */
/* Diğer gerekli stil tanımlamaları */
}

.tm-letter {

display:inline-block;
font-size:30px;
margin: 0 5px;
margin-top: 10px;
opacity: 0;
transform: translateY(0);
animation: letter-animation 6s ease-in-out infinite;
}

@keyframes letter-animation {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
10%, 40%, 60%, 90% {
opacity: 1;
transform: translateY(-10px);
}
20%, 80% {
opacity: 1;
transform: translateY(0);
}
}

#m-letter {
animation-delay: 1.5s;
}

a {
position: relative;
display: inline-block;
padding: 0px;
}

a::before {
content: '';
position: absolute;
top: 50%; /* Orta konumu */
left: 50%; /* Orta konumu */
transform: translate(-50%, -50%); /* Merkezden düzgün bir şekilde ayarlamak için */
width: 50px;
height: 45px;

border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */
box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); /* Buradaki piksel değerlerini gölgenin yayılımını kontrol etmek için ayarlayabilirsiniz */

filter: blur(4px) brightness(1.5); /* Parlaklık filtresi eklendi */
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;

z-index: -1;
}

a:hover::before {
opacity: 1;

}

body.hoverEffect {
background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a);
}

#gameCard {
width: 300px;
height: 450px;
margin: 50px auto;
padding: 20px;
border-radius: 15px;
box-shadow:
0 0 50px 10px #FFD700,  /* Altın sarısı glow */
0 0 100px 20px #0000FF, /* Mavi glow */
0 0 150px 30px #000033; /* Koyu mavi shadow */
background: rgba(0,0,0,0.7);  /* Slightly transparent black to make the ambilight effect visible behind the card */
color:#FFD700;   /* Altın sarısı text */
text-align: center;
border: 3px solid #FFD700; /* Altın sarısı border */
}

#gameCardLink span {
font-size: 18px;
margin-right: 5px; /* Harf aralarına 10 piksel boşluk ekler */
font-weight: bold; /* Metni kalın yapar */
}

#gameCardLink span:last-child {
font-size: 0.79em; /* ® simgesini küçült */
vertical-align: super; /* ® simgesini yukarı taşı */
opacity: 0.9;
font-weight: bold; /* Metni kalın yapar */
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Siyah gölge ekler */
}

#loading-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://www.hdwallpapers.in/download/black_hole-1920x1080.jpg");
background-repeat: no-repeat;
background-size: cover ;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.loader {

border-top: 9px solid #00a2ed;
border-radius: 80%;
width: 18vw; /* Genişliği viewport'un %25'i yapar */
height: 18vw; /* Yüksekliği de viewport'un %25'i yapar */
animation: spin 2s linear infinite; /* Burada spin animasyonunu kullanıyoruz */
position: absolute; /* Pozisyonu mutlaka absolute olarak ayarlamalısınız. */
left: 41%; /* X ekseninde ortalamak için sayfanın yarısı kadar sola kaydırın. */
top: 38%; /* Y ekseninde ortalamak için sayfanın yarısı kadar yukarı kaydırın.  */
transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}











T
M


[url=https://github.com/murattasci06][i][/i][/url]


[list]



[img]https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg[/img]
Marvel
Spiderman
1

https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080






1.89 Bil.  $



[*]


[img]https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg[/img]
DC
Batman
2

https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080






771 Mil. $



[*]


[img]https://wallpapercave.com/wp/wp12279011.jpg[/img]
Marvel
Guardians_of_the_Galaxy_Vol_3
3

https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080






845.4 Mil. $



[*]


[img]https://wallpaperaccess.com/full/8940499.jpg[/img]
DC
Shazam2
4

https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080






462.5 Mil.  $



[*]


[img]https://images2.alphacoders.com/131/1316679.jpeg[/img]
DC
Flash
5

https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080






560.2 Mil. $



[*]


[img] https://images3.alphacoders.com/121/1213553.jpg[/img]
Marvel
Dr_Strange_2
6

https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080






955.8 Mil. $



[/list]






// Flip card effect








// Flip card effect




// Body's hoover effect





// Portal effect scripts





function hideLoadingAnimation() {
console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor");
var loadingAnimation = document.getElementById("loading-animation");
var mainContent = document.getElementById("main-content");
loadingAnimation.style.display = "none";
mainContent.style.display = "block";
}
window.onload = function() {
console.log("Sayfa tamamen yüklendi");
hideLoadingAnimation();
};

Hello friends, while the page is loading, I normally expect the spin and background space-themed image to appear on the screen at the same time, but first the green background of the page that will be seen when it loads, then the spin and then the loading screen wallpaper. Is it because I downloaded the wallpaper with background-image in the loading-animation section of the style section, so I can't make them appear at the same time? But how will I ensure it?
The second thing I don't understand is I block the main-content in the style at startup, how does the background green theme color appear at startup? My expectation is that only the loading screen, wallpaper and spin will appear.


Источник: https://stackoverflow.com/questions/781 ... ound-image