この記事では、シームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを主に紹介します。サンプルコードは次のように共有されます。 ケースデモンストレーション フレックスレイアウト フレックス レイアウトと呼ばれるレイアウトは、伸縮性のあるボックス レイアウトです。このレイアウトはモバイル デバイスでよく使用されますが、ブラウザーのバージョンが更新されるにつれて、フレックス レイアウトは独自の利点によりますます一般的に使用されるようになっています。 アイデア:
アニメーション効果
CSSパーツコード * { マージン: 0; パディング: 0; } { テキスト装飾: なし; } .box-big { 位置: 絶対; ディスプレイ: フレックス; 左: 50%; 上位: 50%; 境界線: 1px 実線 #9FD6FF; 変換: translate(-50%, -50%); 幅: 707ピクセル; 高さ: 170ピクセル; /* 背景色: ピンク; */ flex-wrap: ラップ; オーバーフロー: 非表示; } .ボックストップ{ 幅: 707ピクセル; 高さ: 30px; 下境界線: 1px 実線 #9FD6FF; 背景色: #FEFEFE; } .div-ボトム{ 幅: 707ピクセル; 高さ: 136px; /* 背景色: darkgoldenrod; */ オーバーフロー: 非表示; } .st-アイコン-android { 表示: インラインブロック; 幅: 15px; 高さ: 15px; 背景画像: url(../img/hd.gif); マージン: 8px; } h5 { 位置: 絶対; 上: 6PX; 左: 30px; 色: #307DD1; } ul { 位置: 絶対; 左: 90px; 幅: 3000ピクセル; 高さ: 100%; アニメーション: 20 秒間の線形無限実行。 } li { リストスタイル: なし; フロート: 左; 幅: 140ピクセル; 高さ: 100%; マージン: 0 5px 0 5px; /* 背景色: ゴールド; */ flex-wrap: ラップ; } 。写真 { 上マージン: 5px; 幅: 140ピクセル; 高さ: 105px; テキスト配置: 中央; /* 背景色: スプリンググリーン; */ } p { テキスト配置: 中央; } 画像 { カーソル: ポインタ; } @keyframes 実行 { 0% { 左: 0; } 100% { 左: -745px; } } フレックスレイアウトでシームレススクロールを実装するサンプルコードに関するこの記事はこれで終了です。フレックスシームレススクロールの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。
前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...
まず、画像を見てみましょう。今日はこのエフェクトを作成します。 実は、何でもないんです。Web ペー...
私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...
土曜日、本番サーバー上の Redis サーバーが利用できなくなり、エラー メッセージは次のようになり...
ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...
不明なドメイン名 www.baidu.com を Ping するホストのIPアドレスを変更する右クリ...
この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...
MYSQLは大文字と小文字を区別します言葉を見れば信じられます。タイトルを見れば内容がわかります。 ...
順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...
導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...
目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...
目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...
MySQL における Regexp の一般的な使用法特定の文字列を含むあいまい一致# コンテンツフィ...