Question

我正在尝试使用css中的translateY属性复制与此页面相同的动画菜单：https://newland.tv/directors，我使用选取框实现了非常相似的效果，但是动画的结束和开始之间有很大的差距。这是我的代码示例

<marquee bahavior="scroll" direction ="up">  

<ul class="m">

   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>

</ul>

</marquee>

这是css：

.marquee {
    height: 200px;
    width: 800px;
    border: 2px solid #eee;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    margin: 200px auto;
}

 @keyframes marquee {
    0% { down: 0; }
    100% { down: -100%; }
}

Answer 1

您可以将translateX与无限动画一起使用；

.container{
  overflow:hidden;
  height:200px
}

.content{
  height:100%;
  animation: 3s linear up infinite
}

@keyframes up{
  from{transform:translateY(-100%)}
  to{transform:translateY(100%)}
}

<div class="container">
<div class="content">
<ul class="m">
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>

</ul>

</div>
</div>

如何使用translateY或选取框垂直制作列表菜单的动画？

1 个答案: