CSS3 カテゴリメニュー効果

CSS3 カテゴリメニュー効果

CSS3 カテゴリ メニューの効果は次のとおりです。

html

<html>
<ヘッド>
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
        #bg { 幅: 1270px; 高さ: 751px; マージン: 0 auto; 背景: url("images/bg.jpg") no-repeat; }
        .sblock { 幅: 800px; 高さ: 250px; マージン: 0 auto;}
        /*.sblock { transform:translateY(65%); }*/
        .sblock > div { 幅: 200px; 高さ: 250px; マージン: 0 auto; }
        .sb1 { パディングトップ: 170px; }
        .sb2 { パディングトップ: 30px; }
        .sblock div:hover { transform: translateY(-10px); }
        .sblock div { transition:all 0.5s; }
        .sb1 > div:nth-of-type(1) { float: left; background: url("images/1.jpg") no-repeat; }
        .sb1 > div:nth-of-type(2) { float: left; background: url("images/2.jpg") no-repeat; }
        .sb1 > div:nth-of-type(3) { float: left; background: url("images/3.jpg") no-repeat; }
        .sb1 > div:nth-of-type(4) { float: left; background: url("images/4.jpg") no-repeat; }
        .sb2 > div:nth-of-type(1) { float: left; background: url("images/5.jpg") no-repeat; }
        .sb2 > div:nth-of-type(2) { float: left; background: url("images/6.jpg") no-repeat; }
        .sb2 > div:nth-of-type(3) { float: left; background: url("images/7.jpg") no-repeat; }
        .sb2 > div:nth-of-type(4) { float: left; background: url("images/8.jpg") no-repeat; }
    </スタイル>
</head>
<本文>
    <div id="bg">
        <セクションクラス="sblock sb1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </セクション>
        <セクションクラス="sblock sb2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </セクション>
    </div>    
</本文>
</html>

要約する

上記はエディターが紹介したCSS3分類メニュー効果です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  HTMLメタの大きな役割

>>:  VMwareのCentosシステムでNavicatがMySQLサーバーに接続できない問題を解決します

推薦する

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

vuexサードパーティパッケージを使用してデータの永続性を実装する方法

目的: vuex で管理されている状態データを同時にローカルに保存できるようにします。独自のストレー...

Ubuntu20.04 VNCのインストールと設定の実装

VNC はリモート デスクトップ プロトコルです。 VNC を使用して Ubuntu 20.04 を...

CentOS7で新しいデータディスクをマウントするための完全な手順

序文新しい VPS を購入しました。新しい VPS のデータ ディスクはデフォルトではシステムにマウ...

Dockerfile echoは、指定されたファイル内の複数行のテキストを実装する方法を指定します。

Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...

Django2.* + Mysql5.7 開発環境統合チュートリアル図

環境: 10.12 の新機能Python 3.6 MySQL 5.7.25 の場合ジャンゴ 2.2....

非表示のフォームテキストを表示するJavaScript

この記事では、フォームの隠しテキストを表示するためのJavaScriptの具体的なコードを参考までに...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

CentOS 7.5 に Docker をインストールする詳細なチュートリアル

Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...

Linux で Hadoop クラスターをインストールするための詳細な手順

目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...

node.js で EventEmitter をカスタマイズする方法

目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...

Docker-compose インストール db2 データベース操作

db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...

Linux yum コマンドを使用して mysql8.0 をインストールする方法の詳細なチュートリアル

1. 設置前によく掃除する rpm -pa | grep mysql または rpm -qa | g...

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...