Question

我正在尝试做我认为简单的动画。我的下面代码就像它应该的那样工作，除了我的伪元素，＃div与我的常规元素不同。有谁知道发生了什么事？

#div {
   position:absolute; 
   right: 0; 
   left: 0; 
   height:280px !important; 
   width: 100vw; 
   left: 50%; 
   transform: translateX(-50%); 
   background-image: url('imageurl.com');
   background-position: center;
 }

#div::after {
   content: ' '; 
   display: block; 
   position: absolute; 
   left: 0; 
   top: 0; 
   width: 100%; 
   height: 100%; 
   z-index: 1; 
   background-image: url('imgurl2.com'); 
   background-repeat: no-repeat; 
   background-position: 50% 0; 
   background-size: cover;
 }

在这里，我有一直用于此的动画代码。

@keyframes FadeInOut 
{
  0%   { opacity:1; } 
  45%  { opacity:1; } 
  55%  { opacity:0; } 
  100% { opacity:0; }
}

#div::after 
 {
  animation-name: FadeInOut; 
  animation-timing-function: ease-in-out; 
  animation-iteration-count: infinite; 
  animation-duration: 10s; 
  animation-direction: alternate;
 }

Answer 1

这里你的块表现相同。根据屏幕宽度，#div的高度处理图像大小

，您的图像会有所不同

#div h1 a {
  line-height: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}
#div,
#div:after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#div {
  position: absolute;
  right: 0;
  left: 0;
  height: 250px !important;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('http://imgur.com/oGlAyuz.jpg');
}
#div:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url('http://imgur.com/DvyC04K.jpg');
}
@keyframes FadeInOut {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#div::after {
  animation-name: FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}

<div id="div">
  <h1 style="text-decoration: none;" class="HF tk-pragmatica-web">
    <span class="tk-pragmatica-web" style="font-weight: 200; text-shadow: -1px -1px 0px rgba(65,145,197,1.5), 1px 1px 0px rgba(255,255,255,0.2);">
      <a id="ctl00_HpHome" href="Default.aspx" style="color:White;text-decoration:none;">Brian Kim Test</a>
    </span>
  </h1>
</div>

让我的伪div与我的常规div相同

1 个答案: