我正在寻找一个纯 css 无限循环移动 div。 我找到了这个代码笔,它主要是我要找的东西,但我找不到正确的设置来让它一次为一个 Logo 制作动画。 所以基本上,我想启动动画,将一个 Logo 滑入,等待 5 秒,然后滑入下一个。
https://codepen.io/jackoliver/pen/qVbQqW
HTML
<div class="slider">
<div class="slide-track">
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
</div>
</div>
CSS
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
@mixin white-gradient {
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
$animationSpeed: 40s;
// Animation
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 7))}
}
// Styling
.slider {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
height: 100px;
margin: auto;
overflow:hidden;
position: relative;
width: 960px;
&::before,
&::after {
@include white-gradient;
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
&::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
&::before {
left: 0;
top: 0;
}
.slide-track {
animation: scroll $animationSpeed linear infinite;
display: flex;
width: calc(250px * 14);
}
.slide {
height: 100px;
width: 250px;
}
}
有谁知道我该如何解决这个问题吗?
谢谢!!
最佳答案
代码段在我更改代码的地方有注释。我增加了一张幻灯片的大小
代码笔链接 here
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
@mixin white-gradient {
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
$animationSpeed: 40s;
// Animation
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-960px * 7))} // changes done here
}
// Styling
.slider {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
height: 100px;
margin: auto;
overflow:hidden;
position: relative;
width: 860px;
&::before,
&::after {
@include white-gradient;
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
&::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
&::before {
left: 0;
top: 0;
}
.slide-track {
animation: scroll $animationSpeed linear infinite;
display: flex;
width: calc(960px * 14); //changes are done here
}
.slide {
height: 100px;
width: 960px; //changes are done here
}
}
<div class="slider">
<div class="slide-track">
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
</div>
</div>
关于javascript - 无限自动播放纯 css 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55728652/