如何在自动收报机两侧添加渐变？

Question

我希望像这样创建滚动代码：http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/

现在我想在自动收报机的两侧添加渐变，但我只想到在整个宽度上添加线性渐变的方法。我最好避免使用JS并将其限制为CSS / HTML。

（我是设计师，因此我的编码知识有限）

＆＃13;

＆＃13;

.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)
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你必须使用before / after元素然后在这些元素上应用渐变，这里是它应该在CSS中的样子：

.container:before {
  content:" ";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:50px;
  background:#000;
  z-index:99999;
}
.container:after {
  content:" ";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:50px;
  background:#000;
  z-index:99999;
}

你必须用渐变替换背景并改变你想要的宽度，你也可以使用不透明度。

这是它的工作原理： https://codepen.io/t_afif/pen/JrYVLY

这个想法，我让你更新CSS以获得你想要的东西。

Answer 2

是的，您必须在pseudo selector元素parent上使用.container :before and :after over-here，使用伪选择器gradient您可以同时添加新的.container结束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)
  }
}

＆＃13;

＆＃13;

<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>

＆＃13;

{  
   "error":{  
      "errors":[  
         {  
            "domain":"global",
            "reason":"backendError",
            "message":"Backend Error"
         }
      ],
      "code":503,
      "message":"Backend Error"
   }
}

＆＃13;

＆＃13;

＆＃13;