Javascript – CSS-Karusselldiagramm passt sich dem Layoutproblem an

Question

Ähnlich wie beim Karussell-Layout ist für den äußeren blauen Container keine Breite festgelegt und er ist zu 100 % adaptiv. Die Breite jedes Untercontainers entspricht der Breite des übergeordneten Containers und wird in einer Reihe angezeigt Element sind ausgeblendet, ohne js zu verwenden. Kann dies unter bestimmten Umständen erreicht werden?

学习ing · Answer

纯靠CSS就可以实现类似效果：

HTML：

CSS：
.p1{
    animation: pleft 6s infinite linear;
    -webkit-animation: pleft 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}
@keyframes pleft{
    0%{left: 200%}
    100%{left: -100%}
}
.p2{
    animation: pmid 6s infinite linear;
    -webkit-animation: pmid 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-delay:2s;
    -webkit-animation-delay:2s;
}
@keyframes pmid{
    0%{left: 200%}
    100%{left: -100%}
}
.p3{
    animation: pright 6s infinite linear;
    -webkit-animation: pright 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-delay:4s;
    -webkit-animation-delay:4s;
}
@keyframes pright{
    0%{left: 200%}
    100%{left: -100%}
}

jsfiddle.net看看是不是你想要的

学习ing · Answer

想了两种方法: flex 与 inline-block
容器设了宽度是为了便于观察.
按理来说用定位也是可以的.但是得一个一个设置定位, 就没弄了.

https://jsfiddle.net/m41tLwqb/1/
https://jsfiddle.net/2zcqqj26/

女神的闺蜜爱上我 · Answer

曾用纯CSS做轮播，至于你说的这个，应该能实现，但自己没做过，没法肯定