結果のプレビュー
押してフルスクリーンプレビューへのリンクをクリックして、現在のページをプレビューする権利「プレビュー]をクリックします」ボタンをクリックします。
https://codepen.io/comehope/pen/gBwzKR
インタラクティブビデオ
このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。
クロム、サファリ、エッジオープンビューを使用してください。
https://scrimba.com/p/pEgDAM/ca82VAM
ソースコードのダウンロード
毎日のフロントエンド戦闘シリーズ完全なソースコードはgithubのからダウンロードできます。
https://github.com/comehope/front-end-daily-challenges
コード読み取り
デフォルトによって定義されたユーザーのDOMこのitem要素ない<body>コンテナとして素子。
カスタムページサイズは、黒の背景を設定します。
body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: black;
}2つのグレーの線形勾配で細い線を描画するクロス刺し。
body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: black;
background-image:
linear-gradient(
to bottom,
#555 2vmin,
transparent 2vmin
),
linear-gradient(
to right,
#555 2vmin,
transparent 2vmin
);
}絵の左上隅に白いドットと放射状のグラデーション：
body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: black;
background-image:
radial-gradient(
circle at 1vmin 1vmin,
white 1vmin,
transparent 1vmin
),
linear-gradient(
to bottom,
#555 2vmin,
transparent 2vmin
),
linear-gradient(
to right,
#555 2vmin,
transparent 2vmin
);
}タイル張りの背景：
body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: black;
background-image:
radial-gradient(
circle at 1vmin 1vmin,
white 1vmin,
transparent 1vmin
),
linear-gradient(
to bottom,
#555 2vmin,
transparent 2vmin
),
linear-gradient(
to right,
#555 2vmin,
transparent 2vmin
);
background-size: 10vmin 10vmin;
}左とトップドットとの密接な接触を避けるために、少しオフセット背景を追加します。
body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: black;
background-image:
radial-gradient(
circle at 1vmin 1vmin,
white 1vmin,
transparent 1vmin
),
linear-gradient(
to bottom,
#555 2vmin,
transparent 2vmin
),
linear-gradient(
to right,
#555 2vmin,
transparent 2vmin
);
background-size: 10vmin 10vmin;
background-position: 5vmin 5vmin;
}さて、ページを移動するための視線場合は、実際には錯覚である小さな黒い点が、表示されます。
私たちは完了です。