ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう

<html>
<ヘッド>
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
        * { マージン: 0; パディング: 0; 境界線: なし; } 
        .Bl {
            幅: 600ピクセル; 
            高さ: 540px; 
            マージン: 0 自動;
            位置: 相対的;
            上位: 50%;
            変換: translateY(-50%);
        }
        .Bl > 入力 {
            幅: 20%;
            高さ: 40px;
            位置: 絶対;
            カーソル: ポインタ;
            不透明度: 0;
        }
        .Bl 入力:nth-of-type(1){ 左: 0%; }
        .Bl 入力:nth-of-type(2){ 左: 20%; }
        .Bl 入力:nth-of-type(3){ 左: 40%; }
        .Bl 入力:nth-of-type(4){ 左: 60%; }
        .Bl 入力:nth-of-type(5){ 左: 80%; }
        /*スイッチ効果*/
        .Bl input:nth-of-type(1):checked ~ span:nth-of-type(1) { color: white; } /* ~ 兄弟要素を選択*/
        .Bl 入力:nth-of-type(2):チェック済み ~ span:nth-of-type(2) { 色: 白; }
        .Bl 入力:nth-of-type(3):チェック済み ~ span:nth-of-type(3) { 色: 白; }
        .Bl 入力:nth-of-type(4):チェック済み ~ span:nth-of-type(4) { 色: 白; }
        .Bl 入力:nth-of-type(5):チェック済み ~ span:nth-of-type(5) { 色: 白; }
        .Bl 入力:nth-of-type(1):チェック済み ~ .pagebox > .pages { }   
        .Bl input:nth-of-type(2):checked ~ .pagebox > .pages { transform: translateY(-100%); }
        .Bl input:nth-of-type(3):checked ~ .pagebox > .pages { transform: translateY(-200%); }
        .Bl input:nth-of-type(4):checked ~ .pagebox > .pages { transform: translateY(-300%); }
        .Bl input:nth-of-type(5):checked ~ .pagebox > .pages { transform: translateY(-400%); }
        スパン { 
            表示: ブロック;
            幅: 20%;
            高さ: 40px; 
            背景色: 赤;
            フロート: 左;
            テキスト配置: 中央;
            行の高さ: 40px;
            フォントサイズ: 20px;
        }
        .pagebox,.pages {
            幅: 100%; 
            高さ: 500px;
        }
        .ページボックス{
            オーバーフロー: 非表示;
        }
        .ページ {
            遷移: すべて 0.5 秒;
        }
        .ページ {
            幅: 100%;
            高さ: 100%;
            テキスト配置: 中央;
            フォントファミリ: "Microsoft YaHei";
            フォントサイズ: 30px;
            行の高さ: 500px;
            色: 白;
        }
        .page1 { 背景色: ピンク; }
        .page2 { 背景色: 青; }
        .page3 { 背景色: 赤; }
        .page4 { 背景色: 緑; }
        .page5 { 背景色: 黒; }
    </スタイル>
</head>
<本文>
    <div class="Bl">
        <input type="radio" name="btn" チェック済み><span>1</span>
        <input type="radio" name="btn" ><span>2</span>
        <input type="radio" name="btn" ><span>3</span>
        <input type="radio" name="btn" ><span>4</span>
        <input type="radio" name="btn" ><span>5</span>
        <セクションクラス="ページボックス">
            <div class="pages">
                <div class="page page1">これはページ1です</div>
                <div class="page page2">これはページ2です</div>
                <div class="page page3">これはページ3です</div>
                <div class="page page4">これはページ4です</div>
                <div class="page page5">これはページ5です</div>
            </div>
        </セクション>
    </div>
</本文>
</html>

要約する

上記は、私が紹介した純粋な CSS3 でページ切り替え効果を作成するためのサンプル コードです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MySQL のロック待機とデッドロック問題の分析

>>:  Webデザインチュートリアル(3):デザインの手順と考え方

推薦する

MySQL で not in を使用して null 値を含める問題を解決する

知らせ! ! ! uid が (a,b,c,null) に含まれないユーザーから * を選択します。...

MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策

方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...

HTML タグでの this の使用法の紹介

例えば:コードをコピーコードは次のとおりです。 <html> <ヘッド> &...

jsはショッピングカートの加算と減算、価格計算機能を実現します

この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル(MAC)

この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...

水平スクロールバーを実装する2つの方法の例

序文:プロジェクトの開発中に、1 行にナビゲーション バーが多すぎる場合に水平スクロール バーを実装...

JavaScript で配列の最大値と最小値を実装する 6 つの方法

配列[1,8,5,4,3,9,2]が与えられた場合、配列の最大値9と最小値1を取得するアルゴリズムを...

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

流れと動的なライン効果を実現する純粋なCSSコード

アイデア:外側のボックスは背景を設定し、内側のボックスは背景の幅と高さを設定し、ボックスを動かすアニ...

MySQLのユーザーアカウント管理と権限管理の詳細な説明

序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...

CSS ブラウザ互換性の問題に対する 4 つの解決策

フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事...

複数人チャットルームを実現する js コード

この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...

Mysql の varchar 型に関する注意点

varchar の保存ルール4.0 未満のバージョンでは、varchar(20) は 20 バイトを...

UbuntuにMySQLデータベースをインストールする方法

Ubuntu は、Linux をベースにした無料のオープンソース デスクトップ PC オペレーティン...