suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Javascript – CSS-Karusselldiagramm passt sich dem Layoutproblem an

Ähnlich wie beim Karussell-Layout legt der äußere blaue Container die Breite nicht fest und 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 es unter den gegebenen Umständen realisiert werden?

给我你的怀抱给我你的怀抱2730 Tage vor1077

Antworte allen(3)Ich werde antworten

  • 学习ing

    学习ing2017-06-13 09:25:41

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

    HTML：
<body style='margin: 0;'>
    <p style='position: absolute;width: 40%;height: 100%;background-color: blue;overflow: hidden;'>
        <p class="p1" style='position: absolute;width: 100%;height: 80%;background-color: orange;top: 10%;left: 200%;'></p>
        <p class="p2" style='position: absolute;width: 100%;height: 80%;background-color: green;top: 10%;left: 200%;'></p>
        <p class="p3" style='position: absolute;width: 100%;height: 80%;background-color: red;top: 10%;left: 200%;'></p>
    </p>
</body>
    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看看是不是你想要的

    Antwort
    0
  • 学习ing

    学习ing2017-06-13 09:25:41

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

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

    Antwort
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-13 09:25:41

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

    Antwort
    0
  • StornierenAntwort