前に書いたものは複雑すぎるので、シンプルなコアにしましょう <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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: Webデザインチュートリアル(3):デザインの手順と考え方
知らせ! ! ! uid が (a,b,c,null) に含まれないユーザーから * を選択します。...
方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...
例えば:コードをコピーコードは次のとおりです。 <html> <ヘッド> &...
この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...
序文:プロジェクトの開発中に、1 行にナビゲーション バーが多すぎる場合に水平スクロール バーを実装...
配列[1,8,5,4,3,9,2]が与えられた場合、配列の最大値9と最小値1を取得するアルゴリズムを...
序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...
アイデア:外側のボックスは背景を設定し、内側のボックスは背景の幅と高さを設定し、ボックスを動かすアニ...
序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...
フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事...
この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...
varchar の保存ルール4.0 未満のバージョンでは、varchar(20) は 20 バイトを...
Ubuntu は、Linux をベースにした無料のオープンソース デスクトップ PC オペレーティン...