仅使用 CSS（不是 Javascript 或 jQuery）显示网站加载图像答案

【问题标题】：show a website loading image using only CSS (not Javascript or jQuery)仅使用 CSS（不是 Javascript 或 jQuery）显示网站加载图像
【发布时间】：2016-12-28 21:44:23
【问题描述】：

当用户打开网站时如何放置徽标和加载图像

当用户打开网站时，徽标会出现一个加载图像，而不是主页在某个时刻后出现，就像这个网站一样 http://www.theprofessionalslb.com/

是否可以仅在 css 中不使用 javascript 或 jquery 来做到这一点？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

是的，您可以使用 animate 属性使用纯 CSS 制作动画。

例如，如果您希望 #img1 先显示，#img2 在后显示，您可以在第二张图片上设置 animation-delay 并使其等于第一张图片的 animation-duration：

#img1 {
    ...
    animation-duration: 2s;
    ...
}
#img2 {
    ...
    animation-delay: 2s;
    ...
}

然后在您的动画中，您可以制作动画，例如opacity 属性来模拟淡入效果。

更多关于 CSS 动画here.

编辑
我创建了一个 fiddle 做你想做的事。如需更多浏览器支持，请咨询caniuse.com。

【讨论】：

以及当用户打开网站时动画出现并且主页打开时如何做到这一点
查看更新的编辑。没有理由使用不必要的 JavaScript 使您的页面膨胀。 @mhmd
您使用的是什么浏览器（和版本）？我将更新小提琴以支持您的浏览器，因为我认为这是这里的问题。
请再次查看here（别忘了点击左上角的“运行”）
sry 但如果我想进行更多搜索，它的名称不起作用

【解决方案2】：

使用加载器图像并将其应用于正文。在页面加载之前显示图片，当页面准备好时删除图片。

jQuery( window ).load( function(){
  //show the image here.
});
jQuery( document ).ready( function(){
  //hide the image here.
});

【讨论】：

【解决方案3】：

他们这样做的方式是由 jQuery-Animations 处理的，如下所示：

// Fade-In logo
$('#logo').fadeIn(2000, function() {
  // When done, fade-in the slogan
  $('#slogan').fadeIn(1400, function() {
    // When this is done, wait 1s and then fade both out
    $('#logo, #slogan').delay(1000).fadeOut(2000, function() {
      // Finally fade-in the content
      $('#content').fadeIn(2000);
    });
  });
});

fadeIn-方法的第一个参数是动画时间，第二个参数是回调函数，在动画完成后执行。欲了解更多信息，请参阅其documentation。

此技术假设您的动画元素在其 CSS 中设置为 opacitiy: 0，或者您将它们设置为隐藏在您的 JS 中：

$('#logo, #slogan, #content').fadeOut(0);

或：

$('#logo, #slogan, #content').hide();

您也可以为此使用纯 CSS，您可以像这样做一些事情：

#logo, #slogan, #content {
  opacity: 0;
}

@keyframes fadeInAndOut {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

#logo {
  animation-name: fadeInAndOut;
  animation-duration: 6400ms;
}

#slogan {
  animation-name: fadeInAndOut;
  animation-duration: 4400ms;
  animation-delay: 2000ms;
}

#content {
  transition: opacity 2000ms ease-out 6400ms;
  opacity: 1;
}

请注意，这两个示例都未经测试，应该只是给您一个想法。您可能还需要为动画使用带有 -webkit-keyframes 前缀的版本，并且如果您希望动画时间在视觉上完美无缺，则需要两个单独的 fadeInAndOut-keyframes 用于两者。

【讨论】：