アニメ

これはフロントエンド チャレンジ - 12 月版、Glam Up My Markup: Winter Solstice への提出です

私が作ったもの

CSS

*{
マージン: 0;
パディング: 0;
ボックスのサイズ設定: ボーダーボックス;
font-family: 'Trebuchet MS'、'Lucida Sans Unicode'、'Lucida Grande'、'Lucida Sans'、Arial、サンセリフ;
}

ボディ{
オーバーフロー-x:非表示 ;
}
.main-width{
幅: 1400px;
最大幅: 95%;
マージン: 0 自動;
}
.hero{
高さ: 100%;
幅: 100%;
最小高さ: 100vh;
背景画像: url(Tanghiro1.png);
背景サイズ: 100%;
背景繰り返し: 繰り返しなし;
}

.hero ヘッダー .logo h2 a{
表示: ブロック;
フォントサイズ: 30px;
フォントの太さ: 600;
テキスト装飾: なし;
色: 白;
font-family:'Noto Sans JP'、サンセリフ;
}

.hero ヘッダー{
表示: フレックス;
align-items: center;
justify-content: space-between;
パディング: 40px 0 30px;

}

ナビ・ウル・リ{
リストスタイル: なし;
表示: インラインブロック;

}

ナビゲーション{
テキスト装飾:なし;
色: アリスブルー;
margin-left: 80px;
フォントサイズ: 20px;
フォントの太さ: 600;
border-bottom: 2 ピクセルの純白;
トランジション: 4 秒;

}

nav ul li:not(:last-child) a:hover
nav ul li:not(:last-child) a:focus{
border-bottom: 2 ピクセルの純白;

}

nav ul li.active a{
border-bottom: 2 ピクセルの純白;
}

nav ul li.btn a{
背景: 透明;
色: 白;
ボーダー: 1px ソリッド #f5dca8;
パディング: 9px 20px;
境界半径: 80px;
行の高さ: 1.4;
フォントサイズ: 18px;
フォントの太さ: 600;
margin-left: 150px;

}

nav ul li.btn:hover a{
境界線: 1 ピクセルの白一色;
色: 黒;
背景: 白;
遷移: .4s;

}

.content{
パディングトップ: 140px;
}

.content .main-text{
位置: 相対;
z インデックス: 2;
margin-bottom: 50px;

}

.content .main-text h6{
フォントサイズ: 14px;
フォントの太さ: 400;
色: 白;
margin-bottom: 40px;

}

.content .main-text h1{
フォントサイズ: 60px;
行の高さ: 1;
色: 白;
マージン: 0px 0px 45px;
フォントファミリー: 'パーマネント マーカー'、筆記体;

}

.content .main-text p{
最大幅: 100%;
幅: 480px;
色: 白;
行の高さ: 1.8;
フォントサイズ: 15px;
margin-bottom: 50px
}

.content .main-text a{
表示: インラインブロック;
テキスト装飾: なし;
色: 黒;
背景: 白;
境界線: 1 ピクセルの白一色;
パディング: 9px 25px;
行の高さ: 1.4;
境界半径: 30px;
フォントサイズ: 14px;
フォントの太さ: 500;

}

.content .main-text a:hover{
変換: スケール(1.2);
ボーダー: 1px ソリッド #f5dca8;
背景: 透明;
色: 白;
遷移: .4s;

}

HTML

アニメ

鬼滅の刃

• 季節
• エピソード
• マンガ
• 今すぐプレイ

#1 ベストアニメ
吾峠呼世晴によって書かれ、描かれた日本の漫画シリーズです

デーモンスレイヤー

家族が鬼に襲われ、生き残るのは炭治郎と徐々に鬼に変化していく妹の禰豆子の二人だけです。炭治郎は家族の仇を討ち、妹を治すために鬼殺隊士になることを目指す....

今すぐ見る

これは私専用のアニメ ウェブサイトで、最高のアニメーション ボタンとスムーズな遷移を備えています

スワリーのすべての権利は私に属します

以上がアニメの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。