简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Javascript – CSS-Karusselldiagramm passt sich dem Layoutproblem an
给我你的怀抱
给我你的怀抱 2017-06-13 09:23:41
0
3
1051

Ä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?

给我你的怀抱
给我你的怀抱

Antworte allen(3)
学习ing
学习ing2017-06-13 09:25:41 3 Etage

纯靠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看看是不是你想要的

Wie +0
Antwort hinzufügen
学习ing
学习ing2017-06-13 09:25:41 2 Etage

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

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

Wie +0
Antwort hinzufügen
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-13 09:25:41 1 Etage

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！