4
私はビールのガラスを空にするようなプログレスバーを作ろうとしています。残念ながら、私は芸術家ではありませんが、私はベストを尽くしています。私の "ビール"垂直進行バーを稼働させる
私のコンセプトは、このように書きます：
- は "ビール" の背景、垂直高を100％と
<div>があります。オーバーフローを隠す - 内部にもう1つの
<div>があり、親に対して相対的に配置されています。それは含まれています- 白い背景
<div>を "ビール" のパターンをあいまいにし、それがビールの泡キャップ
- 白い背景
の画像は、ここで画像上の概念だ
私はこのスニペットでわかるように、私の目標にほぼ成功しました：
注：アニメーションは/
Promise.timeout = function (delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
};
Promise.animationFrame = function() {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
(async function() {
const progress = document.querySelector("div.top");
for (let i = 0, l = 1000; i < l; ++i) {
progress.style.bottom = (100 - i/10) + "%";
await Promise.animationFrame();
}
})();html, body, div {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.progress {
max-width:300px;
width: 100vw;
float: left;
position: relative;
overflow: hidden;
height: 100%;
background-image: url("https://i.imgur.com/SKfSqEv.jpg");
background-size: 500px;
border-right: 1px solid black;
}
div.progress div.top {
height: 100vh;
position: relative;
bottom: 100%;
}
div.progress div.top div.white{
background-color: white;
width:100%;
height:100%;
}
div.progress div.top div.beer-top {
/*background-image is at the bottom since it is bse64 */
background-repeat: repeat-x;
background-position-y: bottom;
background-position-x: left;
background-size: 302px, 100px;
height: 100px;
}
/*div.progress div.top {
background-position: bottom;
height: 100%;
background-image: url("img/beer-top.png");
}*/
div.main {
float: left;
}
div.progress div.top div.beer-top {
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png');
}<div class="progress">
<div class="top">
<div class="white"></div>
<div class="beer-top"></div>
</div>
<!--<div class="progress-area">
</div>-->
</div>
<div class="main">
</div>をES6非同期待つ必要ですが、二つの大きな問題があります。
- この醜いオレンジ色の線：
は、
div.whiteの高さを100%に設定しているため、フォームは押し下げられ、「100％」状態でも見えます。最後には完全に消えてしまいます。これら二つの問題を解決する方法
：目的の状態はこれですか？
私は、バーが静的に表示されるように、CSSのみのソリューションを探しています（例えば、JavaScriptがなくてもページが読み込まれると40％）。
注：「白いdiv」の背景としてフォームを設定することはオプションではありません。これはフォーム画像の下部が透明なためです。
修正するためにどのように？より多くのビールを飲み、あなたは気づかないでしょう！ – charlietfl
あなたが話しているオレンジ色の線が見えません。私はChrome上にいます - どのブラウザを使用していますか？ –
@AlexvonBrandenfels私はchromeとfirefoxの両方でそれを見る。しかし、それは画面のプロパティに依存することがあります。私はそれが "白" divと "泡" divの間に小さなギャップがあるので起こると仮定します。 –