シームレスなスクロールのための 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

• アニメーション効果

• @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 サイトの他の関連記事を参照してください。