結果のプレビュー
押して、現在のページプレビューの右にあるボタン「プレビュー]をクリックし、」リンクのフルスクリーンプレビューをクリックしてください。
https://codepen.io/zhang-ou/pen/deNqdV
インタラクティブなビデオチュートリアル
このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。
クロム、サファリ、エッジオープンビューを使用してください。
ソースコードのダウンロード
githubのからダウンロードしてください。
https://github.com/comehope/front-end-daily-challenges/tree/master/008-charging-loader-animation
コード読み取り
DOM、唯一のコンテナ要素を定義します。
<div class="battery"></div>
中央揃え:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, teal, aqua);
}
メインバッテリのアウトラインを描きます:
.battery {
width: 6em;
height: 3em;
color: midnightblue;
border: 0.5em solid currentColor;
border-radius: 0.2em;
font-size: 2em;
}
バッテリーの投影が示さ:
.battery {
position: relative;
}
.battery::after {
content: '';
position: absolute;
width: 0.5em;
height: 2em;
background-color: currentColor;
top: 0.5em;
right: -1em;
border-radius: 0 0.2em 0.2em 0;
}
充電容量を描きます:
.battery {
background-image: linear-gradient(to right, whitesmoke, whitesmoke);
background-repeat: no-repeat;
background-size: 30% 80%;
background-position: 0.3em 50%;
}
アニメーションの定義と適用:
@keyframes charge {
from {
background-size: 10% 80%;
}
to {
background-size: 95% 80%;
}
}
.battery {
animation: charge 5s linear infinite;
}
最後に、ステップサイズを変更するには、時間の一次関数によってアニメーション:
.battery {
animation: charge 5s steps(8) infinite;
}
私たちは完了です。
知識ポイント
線形勾配()https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
背景サイズhttps://developer.mozilla.org/en-US/docs/Web/CSS/background-size
背景位置https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
ステップ()https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#Timing_functions
currentColor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Values
ボーダー半径https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius