marquee未使用css3完成循环

时间：2018-06-18 10:52:16

标签： html css

我已经创建了一个选框，但问题是选框没有完成，我有5个项目，但是当maruqee到达第四个项目或第三个项目它开始下一个周期时，

我错过了以下代码的内容。

我已经取得了这么多成就。这也是实现这一目标的最佳方式

＆＃13;
＆＃13; 
.students-container ul {
    list-style-type: none;
    height: auto;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.students-container .student-container{
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}

.students-container .student-container  a{
    display: flex; 
    align-items: center;
    margin-bottom: 15px;
}   

.students-container .student-container .student-profile-image-container img{
    object-fit: contain;
    display: block;
    max-width: 230px;
    max-height: 95px;
    width: auto;
    height: auto;
}

.student-container:hover {
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0%   { top:   8em }
    100% { top: -11em }
}
＆＃13; 
<div class="students-container">
  <ul class="students-list">
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

任何帮助表示赞赏：）

请参阅pen

3 个答案:

答案 0 :(得分：1)

问题是动画的结束位置必须等于所有容器组合的高度（5x 95px）。所有人都会向上移动直到所有消失。这大约是500px

否则物品会向上移动但距离不够，所以每件物品在返回之前都会从屏幕上消失。

还在父容器上添加了悬停事件。所以当一个人徘徊时，所有物品都停止移动。否则，悬停的物品将停止移动，但其余部分将继续移动，这将导致混乱。

.students-container ul {
    list-style-type: none;
    height: auto;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.students-container .student-container{
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 2s linear infinite;
}

.students-container .student-container  a{
    display: flex; 
    align-items: center;
    margin-bottom: 15px;
}   

.students-container .student-container .student-profile-image-container img{
    object-fit: contain;
    display: block;
    max-width: 230px;
    max-height: 95px;
    width: auto;
    height: auto;
}

.students-container:hover .student-container{
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0%   { top:   6em }
    100% { top: calc(-500px - 6em) }
}
<div class="students-container">
  <ul class="students-list">
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
  </ul>
</div>

答案 1 :(得分：0)

您应该在父元素上运行animation，因此.students-list，以防止孩子的运行，调整定位 animation使其运行完整周期，并根据已定义的height max-height + {{1}来计算父的95px 15px，五次，因此margin-bottom：

＆＃13;
＆＃13; 
550px
＆＃13; 
* {box-sizing: border-box}

.students-container {
  position: relative;
  height: 550px; /* 5 x (95px max-height + 15px margin-bottom) */
  overflow: hidden;
  border: 1px solid; /* just for demo */
}

.students-list {
  display: inline-block;
  list-style: none;
  margin: 1em auto;
  background: white;
  position: absolute;
  animation: marquee 10s linear infinite;
}

.student-container a {
  display: flex; 
  align-items: center;
  margin-bottom: 15px;
}

.student-profile-image-container img {
  object-fit: contain;
  display: block;
  max-width: 230px;
  max-height: 95px;
  width: auto;
  height: auto;
}

.students-list:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0%   {bottom: -100%}
  100% {bottom: 100%}
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

从动画中删除infinite 

.students-container ul {
    list-style-type: none;
    height: auto;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.students-container .student-container{
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear;
}

.students-container .student-container  a{
    display: flex; 
    align-items: center;
    margin-bottom: 15px;
}   

.students-container .student-container .student-profile-image-container img{
    object-fit: contain;
    display: block;
    max-width: 230px;
    max-height: 95px;
    width: auto;
    height: auto;
}

.student-container:hover {
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0%   { top:   8em }
    100% { top: -11em }
}
<div class="students-container">
  <ul class="students-list">
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
    <li class="student-container">
      <a href="#">
        <div class="student-profile-image-container">
       <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg">
        </div>
        <div class="student-details-container">
           It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      </a>
    </li>
  </ul>
</div>

相关问题
最新问题