結果のプレビュー
押して、現在のページプレビューの右にあるボタン「プレビュー]をクリックし、」リンクのフルスクリーンプレビューをクリックしてください。
https://codepen.io/zhang-ou/pen/vjLQMM
インタラクティブなビデオチュートリアル
このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。
クロム、サファリ、エッジオープンビューを使用してください。
ソースコードのダウンロード
githubのからダウンロードしてください。
コード読み取り
DOMであって、3つのコンテナのスパンを定義します。
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
中央揃え:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
サイズのコンテナ:
.loader {
width: 150px;
height: 150px;
position: relative;
}
境界線スタイル矩形を設定します。
.loader span {
position: absolute;
box-sizing: border-box;
border: 10px solid dimgray;
border-radius: 2px;
}
3つの矩形の寸法を備えました。
.loader span:nth-child(1) {
width: 100%;
height: 100%;
}
.loader span:nth-child(2) {
width: 70%;
height: 70%;
margin: 15%;
}
.loader span:nth-child(3) {
width: 40%;
height: 40%;
margin: 30%;
}
左上及び擬似トリム要素の右下を描きます。
.loader span::before,
.loader span::after {
content: '';
position: absolute;
width: 10px;
height: 50%;
background-color: gold;
}
.loader span::before {
top: -10px;
left: -10px;
}
.loader span::after {
bottom: -10px;
right: -10px;
}
カスタムアニメーション効果:
@keyframes rotating {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
アニメーションは3つの長方形に適用されます。
.loader span {
animation: rotating linear infinite;
}
.loader span:nth-child(1) {
animation-duration: 4s;
}
.loader span:nth-child(2) {
animation-duration: 2s;
}
.loader span:nth-child(3) {
animation-duration: 1s;
}
最後に、長方形は3つの積層順で提供されます。
.loader span:nth-child(1) {
z-index: 3;
}
.loader span:nth-child(2) {
z-index: 2;
}
.loader span:nth-child(3) {
z-index: 1;
}
私たちは完了です。
知識ポイント
- @keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
- アニメーション、期間https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
- 回転Y https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY
- n番目の子https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
- Zインデックスhttps://developer.mozilla.org/en-US/docs/Web/CSS/z-index
- ::前https://developer.mozilla.org/en-US/docs/Web/CSS/::before
- ::後https://developer.mozilla.org/en-US/docs/Web/CSS/::after