居中水平图像列表的淡入效果

Question

我有一个容器div，其宽度设置为100％。容器内部有一个包装器div，其居中高度为80％ 以及inline-block

水平列出的动态图片数量

.wrapper {
  width: 100%;
}
.testimg{
  height: 100%;
  width: 100%;
}
#testDiv{
  display: block;
  width: 80%;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap; 
}
.testimgdiv{
  width: 120px;
  height: 100px;
  display: inline-block;
}

<div id="testDiv">
    <div class='testimgdiv'>
        <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
        <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
        <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
        <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
        <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
        <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
</div>

我希望左侧的最后一张图像和右侧的最后一张图像具有褪色效果，并且不像jsfiddle中所示那样剪切。有点像旋转木马。有没有办法用CSS和HTML做到这一点？

谢谢

Answer 1

您可以通过将线性渐变背景应用于生成的内容:before和:after #testDiv来做到这一点

.wrapper {
  position: relative;
  max-width: 100%;
}

#testDiv {
  overflow-x: auto;
  white-space: nowrap;
  margin: 0 auto;
}

.testimgdiv {
  width: 120px;
  height: 100px;
  display: inline-block;
}

.testimg {
  height: 100%;
  width: 100%;
}

#testDiv:before,
#testDiv:after {
  width: 40px;
  height: 100%;
  content: '';
  position: absolute;
  top: 0;
}

#testDiv:before {
  left: 0;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

#testDiv:after {
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

<div class="wrapper">
  <div id="testDiv">
    <div class='testimgdiv'>
      <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
      <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
      <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
      <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
      <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
    <div class='testimgdiv'>
      <img class="testimg" src="http://via.placeholder.com/100x100" />
    </div>
  </div>

</div>