带有徽标轮播的CSS效果像效果

Question

我需要帮助制作LOGO滑块， 它在徽标滑块的END处轻弹。我使用了重复的一个来使它连续。

我使用了translateX值来制作动画。

＆＃13;

＆＃13;

.box {
  width: 600px;
  //overflow: hidden;
  margin: 100px auto;
  position: relative;
  background: white;
  height: 100px;
  padding: 20px;
}

.lst-box {
  //white-space: nowrap;
  animation: loop 6s linear infinite;
  position: absolute;
  width: 2500px;
  left: 0;
}

.lst-box li {
  display: inline-block;
  width: 49%;
  float: left;
}

.lst-box li .item {
  width: 200px;
  height: 100px;
  background: tomato;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
  color: white;
  display: inline-block;
}

@keyframes loop {
  0% {
    left: 0;
  }
  100% {
    left: -200%;
  }
}

.lst-box li:nth-child(2) .item {
  background: green;
}

＆＃13;

<div class="box">
  <ul class="lst-box">
    <li>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </li>
    <li>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/vg7c5aan/1/

谢谢

Answer 1

＆＃13;

＆＃13;

.parent{
  padding: 10px;
  background: tomato;
}
.box{
  width: 358px;
  height: 40px;
  margin: 0 auto;
}
ul{
  position: relative;
  list-style: none;
  padding: 0;
  border: 1px solid black;
  margin: 0;
  height: 40px;
  overflow: hidden;
}
li div{
  width: 60px;
  height: 40px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  margin-right: -4px;
}
li{
  position: absolute;
  background: white;
  margin-right: -4px;
}
.one div:nth-child(odd){
  background: orange;
}

.two div:nth-child(odd){
  background: green;
}
.one{
  animation: loop 4s linear infinite;
}
.two{
  animation: looptwo 8s linear infinite;
  /*transform: translate(100%,0);
  margin-left: 4px;*/
}
@-webkit-keyframes loop {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(-100%,0);
  }
  50.1%{
    transform: translate(100%,0);
  }
  100%{
    transform: translate(0,0);
  }
}
@-webkit-keyframes looptwo {
  0% {
    transform: translate(100%,0);
  }
  50% {
    transform: translate(-100%,0);
  }
  50.1%{
    transform: translate(100%,0);
  }
  100%{
    transform: translate(-100%,0);
  }
}

＆＃13;

<div class="parent">
<div class="box">
  <ul class="lst-box">
    <li class="one">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </li>
    <li class="two">
      <div class="item">21</div>
      <div class="item">22</div>
      <div class="item">23</div>
      <div class="item">24</div>
      <div class="item">25</div>
      <div class="item">26</div>
    </li>
  </ul>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;