html - 如何在自动收报机的两边添加渐变？

Question

我想创建一个这样的滚动代码:http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/

现在我想在ticker的两边加上渐变，但是我只能想办法在整个宽度上加一个线性渐变。我最好避免使用 JS 并将其限制为 CSS/HTML。

(我是一名设计师，所以我的编码知识有限)

.scrolling_banner {
  --banner-width: 300px;
  --banner-height: 200px;
  --banner-margin-bottom: 10px;
  --banner-margin-right: 5px;
  --banner-items: 6;
  --banner-duration: 2s;
}

.container {
  width: 100%;
  overflow: hidden;
}

.scrolling_banner {
  height: var(--banner-height);
  width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items));
  margin-bottom: calc(var(--banner-margin-bottom)/ 2);
  font-size: 0
}

.scrolling_banner * {
  margin-bottom: var(--banner-margin-bottom);
  margin-right: var(--banner-margin-right);
  height: var(--banner-height);
  width: var(--banner-width);
}

.first {
  -webkit-animation: bannermove var(--banner-duration) linear infinite;
  -moz-animation: bannermove var(--banner-duration) linear infinite;
  -ms-animation: bannermove var(--banner-duration) linear infinite;
  -o-animation: bannermove var(--banner-duration) linear infinite;
  animation: bannermove var(--banner-duration) linear infinite
}

@keyframes bannermove {
  0% {
    margin-left: 0
  }
  100% {
    margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1)
  }
}

<div class="container">
  <div class="scrolling_banner">
    <img class="first" src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
  </div>
</div>

Answer 1

是的，你必须在 parent 元素上使用 pseudo selector，.container 在这里，使用伪选择器 :before和 :after 你可以在 .container 的两端添加新的 gradient，然后使用 rgba color value 你可以添加位 transparency 因此背景滑动图像变得可见。

.container {
  position: relative;
}

.container:before {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
}

.container:after {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
}

.container {
  position: relative;
}

.container:before {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
}

.container:after {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
}

.scrolling_banner {
  --banner-width: 300px;
  --banner-height: 200px;
  --banner-margin-bottom: 10px;
  --banner-margin-right: 5px;
  --banner-items: 6;
  --banner-duration: 2s;
}

.container {
  width: 100%;
  overflow: hidden;
}

.scrolling_banner {
  height: var(--banner-height);
  width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items));
  margin-bottom: calc(var(--banner-margin-bottom)/ 2);
  font-size: 0
}

.scrolling_banner * {
  margin-bottom: var(--banner-margin-bottom);
  margin-right: var(--banner-margin-right);
  height: var(--banner-height);
  width: var(--banner-width);
}

.first {
  -webkit-animation: bannermove var(--banner-duration) linear infinite;
  -moz-animation: bannermove var(--banner-duration) linear infinite;
  -ms-animation: bannermove var(--banner-duration) linear infinite;
  -o-animation: bannermove var(--banner-duration) linear infinite;
  animation: bannermove var(--banner-duration) linear infinite
}

@keyframes bannermove {
  0% {
    margin-left: 0
  }
  100% {
    margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1)
  }
}

<div class="container">
  <div class="scrolling_banner">
    <img class="first" src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
  </div>
</div>