この半月、期末試験の準備にかなりのエネルギーを費やしました。今日はしっかり復習するべきだったのですが、気分が良くなかったので、とにかく楽しいことを探しました。すると、前回の面接で面接官がした質問を思い出したので(タイトル参照)、簡単なものを作って自分を洗脳しました。 簡単な効果図は次のとおりです。 プログレスバーを実現するための CSS: HTML構造: <div id="進捗"> 70% </div> CSS スタイル: #進捗{ 幅: 50%; 高さ: 30px; 境界線:1px実線 #ccc; 境界線の半径: 15px; マージン: 50px 0 0 100px; オーバーフロー: 非表示; ボックスシャドウ: 0 0 5px 0px #ddd インセット; } #進捗状況スパン{ 表示: インラインブロック; 幅: 70%; 高さ: 100%; background: #2989d8; /* 古いブラウザ */ 背景: -moz-linear-gradient(45度, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */ 背景: -webkit-gradient(linear, 左下, 右上, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome、Safari4+ */ 背景: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Chrome 10+、Safari 5.1+ */ 背景: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Opera 11.10+ */ 背景: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* IE10+ */ 背景: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* W3C */ フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* 水平グラデーションの IE6-9 フォールバック */ 背景サイズ: 60px 30px; テキスト配置: 中央; 色:#fff; } プログレス バーの場合、プログレス カラーは単色にすることもできます。グラデーションを使用する場合は、次の Web サイトにアクセスしてください: http://www.colorzilla.com/gradient-editor/。この方法では、グラデーション効果を簡単に完成できます。これは、PS を使用した操作とまったく同じです。背景をグラデーションに設定した後、繰り返し効果を実現するために background-size も設定する必要があります。 注文進捗バーを実装するための CSS: HTML構造: <div id="プログレスバー"> <!-- 進捗状況バー --> <div> <span></span> </div> <!-- 5 つの円 --> <span></span> <span></span> <span></span> <span></span> <span></span> </div> CSS スタイル: #プログレスバー{ 幅: 80%; 高さ: 50px; 位置: 相対的; マージン: 50px 0 0 100px; } #プログレスバー div{ 幅: 100%; 高さ: 10px; 位置: 絶対; 上位:50%; 左: 0; 上マージン:-20px; 境界線:1px実線 #ddd; 背景: #ccc; } #progressBar div span { 位置: 絶対; 表示: インラインブロック; 背景: 緑; 高さ: 10px; 幅: 25%; } #プログレスバー>span{ 位置: 絶対; トップ:0; 上マージン: -10px; 幅: 40px; 高さ: 40px; 境界線:2px実線 #ddd; 境界線の半径: 50%; 背景: 緑; 左マージン: -20px; 色:#fff; } #プログレスバー>span:nth-child(1){ 残り: 0%; } #プログレスバー>span:nth-child(2){ 左: 25%; 背景:緑; } #プログレスバー>span:nth-child(3){ 左: 50%; 背景:#ccc; } #プログレスバー>span:nth-child(4){ 左: 75%; 背景:#ccc; } #プログレスバー>span:nth-child(5){ 左: 100%; 背景:#ccc; } 次に、JS を使用して動的なプログレス バーを実現します。 PS: CSS スタイルは最適化されていません。CSS コードをデバッグしているときに、最初の円のスタイルが機能していないことがわかったので、デフォルトの背景色を緑に変更しました。この小さなバグを解決するのに協力してくれるブロガーがメッセージを残してくれることを願っています。ありがとうございます!!! オリジナルリンク: https://www.cnblogs.com/jr1993/p/4598630.html 上記は、CSS でプログレスバーとオーダープログレスバーを実装する例の詳細です。CSS でプログレスバーを実装する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
目次仮想DOM仮想DOMとは何か仮想DOMの役割Vue の仮想 DOM vノードvNodeとはvNo...
この記事では、参考までに、centOSにmysql5.7をインストールする詳細な手順を紹介します。具...
<br /> 英語原文: http://desktoppub.about.com/od/...
目次必要コアアイデアReactでスロットを実装する2つの方法必要コンポーネントを自分で書きました。コ...
通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
目次K8Sマスター基本アーキテクチャポッドオーケストレーションコンセプトPod オブジェクトのプロパ...
inline-block について学習しているときに、境界線と inline-block を持つ複数...
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...
フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レ...
レコード ロックは、単一のインデックス レコードをロックします。レコード ロックは常にインデックスを...
1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...
目次背景1. クエリ条件に「or」が含まれているため、インデックスが失敗する可能性があります。 2....