掲示板 html cssとjavascriptを使ったリアルな錯視 https://www.instagram.com/webstreet

掲示板 html cssとjavascriptを使ったリアルな錯視 https://www.instagram.com/webstreet_code/

Mary-Kate Olsen

リリース： 2024-11-21 02:53:10

オリジナル

382 人が閲覧しました

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

インスタグラムでフォローしてください: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>掲示板</title>
    
        @import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');

        体 {
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            高さ: 100vh;
            フォントファミリー: 'Arial'、サンセリフ;
            マージン: 0;
            背景色: #f0f0f0;
        }

        .notice-board {
            ディスプレイ: フレックス;
            フレックスラップ: ラップ;
            コンテンツの位置揃え: 周囲のスペース;
            整列項目: 中央;
            幅: 80%;
            高さ: 80vh;
            ギャップ: 20px;
            パディング: 20px;
            背景色: #54290a; /* 茶色の背景 */
            ボーダー: 10px ソリッド #6b3e1b; /* 濃い茶色の枠線 */
            境界半径: 12px;
            ボックスシャドウ: 0 20px 35px rgba(0, 0, 0, 0.4);
        }

        。知らせ {
            幅: 200ピクセル;
            高さ: 170ピクセル;
            背景色: #f5f5dc;
            パディング: 15px;
            位置: 相対的;
            ボックスシャドウ: 0 4px 10px rgba(0, 0, 0, 0.2);
            境界半径: 10px;
            トランジション: トランスフォーム 0.3 秒イーズ、ボックスシャドウ 0.3 秒イーズ。
            font-family: 'Shadows Into Light'、筆記体。
            フォントサイズ: 1.1rem;
            カラー:#333;
            ディスプレイ: フレックス;
            整列項目: 中央;
            コンテンツの位置揃え: 中央;
            テキスト整列: 中央;
            変換: 回転(-5度); /* 初期スキュー効果 */
        }

        .notice:ホバー {
            変換: 変換Y(-8px) 回転(-3度);
            ボックスシャドウ: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .ピン{
            位置: 絶対;
            上: -8px;
            左: 50%。
            変換: 変換X(-50%);
            幅: 18px;
            高さ: 18px;
            背景色: 赤;
            境界半径: 50%;
            ボックスシャドウ: 0 4px 8px rgba(0, 0, 0, 0.3);
            z インデックス: 1;
        }

        /* 各通知に固有のスキューと背景色を追加します */
        .notice:nth-child(1) {
            背景色: #FFECB3; /* 薄黄色 */
            変換: 回転(-2度);
        }

        .notice:nth-child(2) {
            背景色: #C8E6C9; /* ライトグリーン */
            変換: 回転(2度);
        }

        .notice:nth-child(3) {
            背景色: #FFCDD2; /* ライトピンク */
            変換: 回転(-4度);
        }

        .notice:nth-child(4) {
            背景色: #D1C4E9; /* ラベンダー */
            変換: 回転(3度);
        }

    </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上が掲示板 html cssとjavascriptを使ったリアルな錯視 https://www.instagram.com/webstreet_code/の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。