結果のプレビュー
押してフルスクリーンプレビューへのリンクをクリックして、現在のページをプレビューする権利「プレビュー]をクリックします」ボタンをクリックします。
https://codepen.io/comehope/pen/qYepNv
インタラクティブなビデオチュートリアル
このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。
クロム、サファリ、エッジオープンビューを使用してください。
https://scrimba.com/p/pEgDAM/cQ73Vt8
ソースコードのダウンロード
毎日のフロントエンド戦闘シリーズ完全なソースコードはgithubのからダウンロードできます。
https://github.com/comehope/front-end-daily-challenges
コード読み取り
定義されたDOMであって、テキストコンテナ:
<div class="warning">ERROR 404</div>
中央揃え:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(20%, 20%, 20%);
}
定義されたテキストスタイル:
.warning {
color: whitesmoke;
font-size: 100px;
font-family: sans-serif;
font-weight: bold;
}
要素は、擬似フレームサイズを定義します。
.warning {
position: relative;
padding: 0.6em 0.4em;
}
.warning::before,
.warning::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.2em solid;
box-sizing: border-box;
}
フレームは、2つの部品に分割されています。
.warning::before,
.warning::after {
border: 0.2em solid transparent;
color: orangered;
}
.warning::before {
border-top-color: currentColor;
border-right-color: currentColor;
}
.warning::after {
border-bottom-color: currentColor;
border-left-color: currentColor;
}
トップの境界と右境界シンク層:
.warning::before {
z-index: -1;
}
下境界線と影の境界線の場合:
.warning::after {
box-shadow: 0.3em 0.3em 0.3em rgba(20%, 20%, 20%, 0.8);
}
最後に、国境を上げてみましょう:
.warning::before,
.warning::after {
animation: rotating 10s infinite;
}
@keyframes rotating {
to {
transform: rotate(360deg);
}
}
私たちは完了です。