Проблема с синхронизацией вращения, которая не появляется при загрузке фонового изображения. ⇐ 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();
};

Добрый день, друзья! Во время загрузки страницы я обычно ожидаю, что на экране одновременно появятся вращающееся и фоновое изображение на космическую тематику, но сначала зеленый фон страницы, который будет видно при загрузке, затем вращение, а затем обои экрана загрузки. Это потому, что я загрузил обои с фоновым изображением в разделе анимации загрузки раздела стилей и не могу заставить их появляться одновременно? Но как мне это обеспечить?
Второе, чего я не понимаю, это то, что я блокирую основной контент в стиле при запуске, как при запуске отображается зеленый цвет фона темы? Я ожидаю, что появятся только экран загрузки, обои и вращение.

Подробнее здесь: https://stackoverflow.com/questions/781 ... ound-image