---- 4つの学習HTMLとCSS
ファイルの説明
！[Alt]キー
（https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-ck-c0xffffffff-no-rj-mo0）
オンラインチュートリアルと呼ばyoutubeにオープンチャネルからこの学習リソース、（HTTPS ：システムの中から//www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）は、このプラットフォームようにも私に、彼は私が彼自身のCSSスタイルのいくつかは惹か送信された最初の時間のためのチャネルの意思がないプッシュが、あなたと共有する学習リソースのいくつかの有用な。**
コード
HTML
htmlコードは非常に簡単です
<body>
<section>
<div>
<h2 class="smile">smile</h2>
<h2 class="heart">heart</h2>
<h2 class="star">star</h2>
</div>
</section>
</body>
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
/* background-color: blue; */
}
section {
position: absolute;
width: 100%;
height: 100vh;
cursor: url('pointer.png'), pointer;
display: flex;
justify-content: center;
align-items: center;
}
/*click 的效果*/
section:active {
cursor: url(clicked.png), pointer;
}
h2 {
margin: 0;
padding: 0;
font-size: 8em;
color: #262626;
text-transform: uppercase;
transition: 0.5s;
text-align: center;
}
h2:hover {
color: #ccc;
}
h2.smile {
cursor: url('smile.png'), pointer;
}
h2.star {
cursor: url('star.png'), pointer;
}
h2.heart {
cursor: url('heart.png'), pointer;
}
あなたは手の込んだしたいいくつかのポイントがあります。
「100％」と100vwまたは100VHの区別に関しては1：
高さ：ビューポートの高さの= 100％100VH
高さ：親の100％= 100％素子高さAPOS
手短に言えば、
％は比VWある（ビューポート幅）VH（ビューポートの高さ） セットの親要素のサイズのウィンドウでありますVWとウィンドウのサイズ、100vw = 100％のウィンドウ幅100VH = 100％の高さ、VHの大きさは、ウィンドウのサイズ、非常に適しこのユニットを使用して様々なアプリケーションを開発するために使用される装置の画面を設定します。
2.画面中央の中央
display: flex;
justify-content: center;
align-items: center;
「テキスト整列：センター「に付随するテキストをセンタリングするには、
」テキスト総額を調整するためのテキストは、変換します"
3.遷移
あなたは別のトランジション効果の異なる状態間のスイッチングの遷移元素を定義することができます。例えば、のような、異なる擬似要素の切り替えで：,:ホバーアクティブ状態またはJavaScriptで実装変化によって。
4.カーソルイメージ要件
100pxにの長さと幅に調整する必要があり、
あなたが背景を削除する必要がある場合は、教えは、以下のリンクを参照して見ることができます。
https://www.bilibili.com/video/av8154640/
実績
:)
