是否可以对DIV的轮播进行连续动画处理? [英] Is it possible to continuously animate a carousel of DIVs?

问题描述

假设红色框代表我的网页容器，而项目B，C，D在该容器之外.是否可以仅使用CSS像轮播一样自动将项目(A，B，C，D ...)左右滚动?

Assuming the red box represents my webpages container, and items B,C,D are outside the container. Is it possible to have the items (A,B,C,D...) auto scroll left to right like a carousel using just CSS?

我在网上看到了一些示例，这些示例如何使用图像而不是带有固定宽度的文本的DIV?

I'm seen examples online on how to do this with images but not with DIVs full of text with a set width?

.container {
  margin: 0 auto;
  width: 800px;
  background: red;
  padding: 36px;
  box-sizing: border-box;
}

.items {
  display: flex;
}

.item {
    box-sizing: border-box;
    margin-left: 72px;
    margin-right: 72px;
    padding: 36px;  
position: relative;
    width: 200px;
    min-width: 200px;
    background: #efefef;
    text-align: center;
    border-radius: 4px;

}

<div class="container">
  <div class="items">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div> 
    <div class="item">D</div>    
  </div>
 </div>

推荐答案

这是一种实现方法.

.container {
  margin: 0 auto;
  background: red;
  box-sizing: border-box;
  overflow-x: hidden;
}

.items {
  min-height: 200px;
  position: relative;
}

.item {
  box-sizing: border-box;
  padding: 36px;
  position: absolute;
  width: 30%;
  background: #efefef;
  text-align: center;
  border-radius: 4px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: slide-item 4s infinite;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  opacity: 0;
}

.item:nth-child(2) { animation-delay: 1s; }
.item:nth-child(3) { animation-delay: 2s; }
.item:nth-child(4) { animation-delay: 3s; }

@keyframes slide-item {
    0% { left: 150%; opacity: 1; }
   36% { left:  50%; opacity: 1; }
   72% { left: -50%; opacity: 1; }
  100% { left: -50%; }
}

<div class="container">
  <div class="items">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
  </div>
</div>

这篇关于是否可以对DIV的轮播进行连续动画处理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！