CSS-Flex-Layout für nahtloses Scrollen

Dieser Artikel stellt hauptsächlich den Beispielcode des Flex-Layouts vor, um nahtloses Scrollen zu erreichen, und teilt ihn wie folgt mit allen:

Demonstration des Falls

Flex-Layout

Das sogenannte Flex-Layout ist das flexible Box-Layout. Dieses Layout wird häufiger auf Mobilgeräten verwendet Terminals, aber mit der Entwicklung von Browsern wird die Version aktualisiert und das Flex-Layout wird aufgrund seiner eigenen Vorteile zunehmend verwendet.

Idee:

• Analysieren Sie zunächst die Struktur dieser kleinen Demo, die oberen und unteren Strukturen. Wir können einen Behälter verwenden, um sie einzuwickeln (die sogenannte große Box). ).

• Oben ist eine Navigation und oben ist eine Ul. Unten können wir zwei p, 100 % der Breite und eine benutzerdefinierte Höhe verwenden.

• Als nächstes öffnen wir das Modell und merken uns die bestimmte übergeordnete Box! display:flex;, wie teilt man es dann nach oben und unten auf? Fügen Sie weiterhin „flex-wrap: wrap“ hinzu, das den oberen und unteren Teil trennt.

• Der nächste Schritt besteht darin, den unteren Teil von ul in p zu verschachteln. Die Höhe von ul ist also leicht zu verstehen. , kann unendlich breit sein! ! ! Wir lassen die Breite von ul 3000px betragen

• Als nächstes setzen wir li. Wie Sie sehen, hat das Innere von li auch eine obere und untere Struktur, also, hehe! Muss li auch flex-wrap:wrap; aktivieren? Das p oben steht für img und das a-Tag unten.

• Denken Sie daran, Sie müssen es schweben lassen! Und bedenken Sie den Überlauf: dort versteckt

Animationseffekt

• Wir haben fünf Bilder und lassen sie jetzt von rechts nach links wandern. Dann nennen wir Ul-Bewegung. Ist es möglich, Li-Bewegung anzutreiben?

• Wir verwenden @keyframes, um den linken Wert von ul zu ändern, aber es tritt ein Problem auf. Ich habe fünf Bilder eingefügt und ul verschoben, und die rechte Seite verschwand und wurde leer. Was zu tun? ? ?

• Können wir noch eine Kopie der fünf Li machen und sie hinten anbringen? Die Antwort ist ja! ! Wenn unsere Linke gerade die erste Gruppe von Li entfernt, kommt die zweite Gruppe einfach nicht hoch. Dann verwenden wir die Animation: 20s linear unendlich ausführen. Ist eine Endlosschleife in Ordnung?

CSS-Teilecode

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.box-big {
    position: absolute;
    display: flex;
    left: 50%;
    top: 50%;
    border: 1px solid #9FD6FF;
    transform: translate(-50%, -50%);
    width: 707px;
    height: 170px;
    /* background-color: pink; */
    flex-wrap: wrap;
    overflow: hidden;
}

.box-top {
    width: 707px;
    height: 30px;
    border-bottom: 1px solid #9FD6FF;
    background-color: #FEFEFE;
}

.p-bottom {
    width: 707px;
    height: 136px;
    /* background-color: darkgoldenrod; */
    overflow: hidden;
}

.st-icon-android {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/hd.gif);
    margin: 8px;
}

h5 {
    position: absolute;
    top: 6PX;
    left: 30px;
    color: #307DD1;
}

ul {
    position: absolute;
    left: 90px;
    width: 3000px;
    height: 100%;
    animation: run 20s linear infinite;
}

li {
    list-style: none;
    float: left;
    width: 140px;
    height: 100%;
    margin: 0 5px 0 5px;
    /* background-color: gold; */
    flex-wrap: wrap;
}

.photo {
    margin-top: 5px;
    width: 140px;
    height: 105px;
    text-align: center;
    /* background-color: springgreen; */
}

p {
    text-align: center;
}

img {
    cursor: pointer;
}

@keyframes run {
    0% {
        left: 0;
    }
    100% {
        left: -745px;
    }
}

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonCSS-Flex-Layout für nahtloses Scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!