Question

我想实现类似滑块的功能-两张图片，第二张图片在两秒钟后出现。我有两个位置绝对图像，第一个具有100％的宽度和高度，第二个具有开始时的0％和100％高度。两秒钟后，第二张图片开始从0宽度增加到100％宽度，过渡时间为3s。因为它具有背景位置遮罩-在过渡期间，背景图像更改（可以在过渡结束时看到），因为比率不同。这看起来很丑陋，当图像最后“增加”时，我想防止这种修整效果。

Codepen

.parent {
  width: 100%;
  height: 500px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.s {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://icdn3.digitaltrends.com/image/2018-monterey-2019-bugatti-divo-5-1200x630-c-ar1.91.jpg);
  background-size: cover;
  transition: all 1s ease-in;
}
.s.act {
  /*left:50%;*/
}
.q {
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://www.economiadehoy.es/fotos/8/Ford_mustang_5.0_2017_3.jpg);
  background-size: cover;
  transition: all 3s;
}
.q.act {
  width: 100%;
}

宽度和背景尺寸封面的过渡效果

0 个答案: