シームレスなスクロールのための CSS Flex レイアウト

この記事では主にシームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを紹介し、皆様に共有します。

#フレックス レイアウト

いわゆるフレックス レイアウトは、フレキシブル ボックス レイアウトです。このレイアウトがより一般的です。モバイル端末で使用されていたフレックスレイアウトですが、ブラウザの発展に伴いバージョンが更新され、その利点からフレックスレイアウトが広く使われるようになりました。

アイデア:

まず、この小さなデモの構造、つまり上部と下部の構造を分析します。それをラップするコンテナー (いわゆる大きなボックス) を使用できます。 ）。

• 上部はナビゲーション、上部は ul. 以下では 2 ps、幅の 100%、カスタマイズされた高さを使用できます。

• 次にモデルを開いて、特定の親ボックスを覚えておきます。 display:flex; では、上下に分割するにはどうすればよいでしょうか?続けて、上部と下部を分離する flex-wrap:wrap; を追加します。

• 次は下の部分です pの中にulが入れ子になっていて、ulの高さが分かりやすいです pの高さです では、ulの幅はどれくらいでしょうか? 、無限に広がる可能性があります！ ！ ！ ulの幅を3000px

• にしましょう 次にliを置きます ご覧のとおり、liの中もトップダウン構造になっていますので、ふふふ！ li も flex を有効にする必要がありますか? flex-wrap: Wrap;。上部の p は img で、下部の a タグです。

• li は浮動する必要があることを忘れないでください。そしてオーバーフローを考えてみましょう: hidden put there

• アニメーション効果

5 つの画像があり、それらを右から左に動かします。次に、ul 運動を呼び出しますが、li 運動を駆動することは可能ですか?

• @keyframes を使用して ul の左側の値を変更しますが、ここで問題が発生します。写真を 5 枚配置して ul を移動すると、右側が消えて空白になります。何をするか？ ? ?

• 5 里のコピーをもう 1 つ作成して、後ろに置いてもいいですか?答えは「はい」です！ ！私たちの左派が最初のグループの li を削除しただけでは、2 番目のグループは現れません。次に、アニメーションを使用します: 20 秒のリニア無限を実行します。無限にループしても問題ありませんか?

• css 部分コード

* {
    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;
    }
}

推奨チュートリアル: "

CSS チュートリアル

"

以上がシームレスなスクロールのための CSS Flex レイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。