結果のプレビュー
押して、現在のページプレビューの右にあるボタン「プレビュー]をクリックし、」リンクのフルスクリーンプレビューをクリックしてください。
https://codepen.io/zhang-ou/pen/qYqwQp
インタラクティブなビデオチュートリアル
このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。
クロム、サファリ、エッジオープンビューを使用してください。
ソースコードのダウンロード
githubのからダウンロードしてください。
https://github.com/comehope/front-end-daily-challenges/tree/master/006-blue-dazzling-diamond
コード読み取り
コンテナ要素を備え、DOMに定義:
<div class="diamond">
<span></span>
</div>
中央揃え:
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ファセットの最初のセットの形状を描きます:
.diamond {
display: grid;
}
.diamond span {
border-width: 50px;
border-style: solid;
}
第一の端面の色のグループだけでなく、バック、これらのカラー値を使用するので、変数の定義:
:root {
--color1: deepskyblue;
--color2: steelblue;
--color3: royalblue;
--color4: dodgerblue;
}
.diamond span {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
DOMコンテナは3グループファセットを追加します。
<div class="diamond">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
4ファセット組成卍グリッドの最初のグループは、ダイヤモンド形状に変換します。
.diamond {
grid-template-columns: 1fr 1fr;
transform: rotate(45deg);
}
.diamond span:first-child {
border-color: transparent var(--color2) var(--color3) transparent;
}
カスタムアニメーション効果:
@keyframes animate {
0% {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
25% {
border-color: var(--color4) var(--color1) var(--color2) var(--color3);
}
50% {
border-color: var(--color3) var(--color4) var(--color1) var(--color2);
}
75% {
border-color: var(--color2) var(--color3) var(--color4) var(--color1);
}
100% {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
}
最後に、アニメーション効果は、グループ1以外の面に適用されます:
.diamond span:not(:first-child) {
animation: animate 2s linear infinite;
}
私たちは完了です。
知識ポイント
- 変数https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- ボーダー幅https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
- ボーダーカラーhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-color
- グリッドテンプレート列https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
- 回転()https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate