javascript - 重新创建此预加载屏幕——看起来像 gif 而不是编码动画

Question

编码新手在这里! 几个小时以来，我一直在尝试重新创建此预加载屏幕 ( http://addpbj.com )，但我似乎无法做到正确。所有在线教程都在展示如何制作动画旋转器和加载器，但我喜欢 Logo 的颤动。我觉得我正在以错误的方式解决这个问题。我一直在尝试将附加的 gif 作为我的预加载屏幕。 到目前为止，这是我的代码:

    <div id="dvLoading"></div>
*/----CSS----/*
   #dvLoading{
    background:#000       url(https://media.giphy.com/media/l4JyJHAF8blvfplf2/source.gif) no-repeat center center;
  display: blocks;
  position:relative;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 150px;
  position: fixed;
  z-index: 1000;
   margin: -75px 0 0 -75px;
}
*/----JQ----/*
        $(window).load(function(){
       $('#dvLoading').fadeOut(2000);
    });

(http://codepen.io/anon/pen/MJGPQG) . jquery有什么问题吗？

任何帮助将不胜感激。

Answer 1

这只是一个缩放和不透明度循环。

body{
  background: #ed4424;
  position: relative;
  height: 100vh;
}

img{
  position: absolute;
  width:100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform-origin: left;
  -webkit-animation: THROB 8s infinite;
  -moz-animation:    THROB 8s infinite;
  -o-animation:      THROB 8s infinite;
  animation:         THROB 8s infinite;
}

@-webkit-keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}
@-moz-keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}
@-o-keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}
@keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}

<img src="http://static1.squarespace.com/static/56d8893cb09f9547596ab9f7/t/56d9a10fe707eb99e3cf68c3/1485878555441/?format=1500w">