ページ切り替え効果を作成するための純粋な 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）：デザインの手順と考え方