加载背景图像时未出现同步旋转的问题

问题描述 投票：0回答：2

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();
};
#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);
  }
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>Game Cards App</title>
    <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png">
  </head>

  <body>

    <div id="loading-animation">
      <div class="loader"></div>
    </div>

    <div id="main-content">

      <div class="tm-container">
        <div class="tm-letter" id="t-letter">T</div>
        <div class="tm-letter" id="m-letter">M</div>
      </div>


      <audio id="flipSound" preload="auto">
  <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav">
</audio>



      <main>
        <div id="gameCardLink">
          <span>G</span>
          <span>a</span>
          <span>m</span>
          <span>e</span>
          <span> </span>
          <!-- Boşluk eklemek için span ekledik -->
          <span> </span>
          <span>C</span>
          <span> </span>
          <span>a</span>
          <span> </span>
          <span>r</span>
          <span> </span>
          <span>d</span>
          <span> </span>
          <span>s</span>
          <span>®</span>
          <!-- Registered trademark simgesi için span -->
        </div>
        <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p>
      </main>


      <ul>
        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman">
              <p class="card__name"><span>Marvel</span><br>Spiderman</p>
              <p class="card__num">1</p>
            </div>


            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
        <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35"  />
        <!-- Dış dairenin kenarı (yeşil) -->
         <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>1.89 Bil. $</span>
            </div>
          </div>
        </li>


        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman">
              <p class="card__name"><span>DC</span><br>Batman</p>
              <p class="card__num">2</p>
            </div>

            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/>
 <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>771 Mil. $</span>
            </div>
          </div>
        </li>

        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3">
              <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p>
              <p class="card__num">3</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>845.4 Mil. $</span>
            </div>
          </div>
        </li>


        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam">
              <p class="card__name"><span>DC</span><br>Shazam2</p>
              <p class="card__num">4</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>



            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/>
<!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>462.5 Mil. $</span>
            </div>
          </div>
        </li>

        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash">
              <p class="card__name"><span>DC</span><br>Flash</p>
              <p class="card__num">5</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>



            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/>
 <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>560.2 Mil. $</span>
            </div>
          </div>
        </li>

        <li class="card">
          <div class="card__flipper">
            <div class="card__front">
              <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2">
              <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p>
              <p class="card__num">6</p>
            </div>
            <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>


            <div class="card__back">
              <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/>
 <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
              <span>955.8 Mil. $</span>
            </div>
          </div>
        </li>
      </ul>

    </div>

  </body>

  </html>

包含完整代码的链接： https://drive.google.com/file/d/1wOhvYSmlcsi5r8m4vosOMFw8Ik2ZoWsW/view?usp=sharing

朋友们您好，在页面加载时，我通常希望旋转和背景太空主题图像同时出现在屏幕上，但首先是加载时看到的页面绿色背景，然后是旋转然后是加载屏幕壁纸。是不是因为我在样式部分的loading-animation部分下载了带background-image的壁纸，所以无法让它们同时出现？但我该如何保证呢？

我不明白的第二件事是我在启动时屏蔽了样式中的主要内容，启动时背景绿色主题颜色如何出现？我的期望是只出现加载屏幕、壁纸和旋转。

javascript html css frontend backend
2个回答
0
投票

问题的一个潜在解决方案是将背景图像转换为 Base64 代码并将其插入到 CSS 代码中。

你可以使用很多工具进行转换，大多数情况下我使用的是这个在线工具。

用途：

  1. 下载图像文件。
  2. 上传至本站
  3. 在Encoding部分您可以看到结果。单击 复制 css 按钮。
  4. 按照以下格式将其插入 CSS 文件中：
    background-image: <copied-code>
    。结果看起来像这样
    background-image: url('data:image/png;base64,<a-very-long-hexadecimal-string>')
0
投票

您看到加载图像需要一些时间才能出现的原因很简单，因为它需要加载。

图片不大，大约200Ko，但是提供图片的服务很慢。在我的办公室光纤上，加载需要一秒钟。我建议你尝试使用 webp 对其进行更多压缩，这可以为你节省一些。我还会从与您的网站相同的域（而不是不同的域）提供该服务。原因是当前需要仅为该资产打开连接，而它可以使用用于其他资产的已打开连接。

此外，正文中的其他图像似乎在加载程序图像之前加载。当加载程序开始下载时，速度会再次减慢。我建议您尽可能利用延迟加载机制：https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

此外，如果您想确保图像加载速度超快，您可以将其数据直接合并到 html 中。您可以获得一个数据 URL，将其放入 src 属性中，该 URL 直接包含图像的所有详细信息，因此不需要下载。实际上，它必须下载，但它将是 HTML 格式，因此 HTML 大小会更大，下载时间更长，但图像将准备好显示。请参阅此图像以获取开发人员抽屉中图像的数据 URL：

IMO，你从错误的角度攻击它。您正在尝试添加加载动画以使用户在网站加载时等待，但网站加载速度太快，以至于加载动画减慢了速度。我真的建议删除它并优化第一次绘制。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.