html - HTML/CSS 中的 Logo 代码

Question

有谁知道如何只用 HTML 和 CSS 编写代码？

http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/

我想在两侧添加渐变，我更喜欢在没有 JS 的情况下进行。

我在 codepen 上想出了一些办法但我有几个问题:

1. 代码在 $duration 结束时刷新。我也希望它无限循环。
2. 我想不出一种方法来向两侧添加渐变。

(本人是设计师，对代码一窍不通)

CSS

$duration: 30s;

@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}

@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}

.ticker-wrap {

position: fixed;
width: 100%;
overflow: hidden;
height: 100px;
background-color: rgba(#fff, 0.0); 
padding-left: 100%; 

}
}

.ticker {

display: inline-block;
height: 100px;
line-height: 5rem;  
white-space: nowrap;
padding-right: 80%;

-webkit-animation-iteration-count: infinite; 
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: $duration;
animation-duration: $duration;

&__item {

display: inline-block;

padding: 0 2rem;
font-size: 2rem;
color: white;   

}
}
body { padding-bottom: 5rem; }
h1,h2,p {padding: 0 5%;}

HTML

<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>

Answer 1

您应该能够只编辑顶部的变量并使其符合您的目的。你需要足够的图像来至少覆盖你想要填充的空间，然后再多一点(为了让持续的影响发挥作用)。

.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="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
  </div>
</div>