この半月、期末試験の準備にかなりのエネルギーを費やしました。今日はしっかり復習するべきだったのですが、気分が良くなかったので、とにかく楽しいことを探しました。すると、前回の面接で面接官がした質問を思い出したので(タイトル参照)、簡単なものを作って自分を洗脳しました。 簡単な効果図は次のとおりです。 プログレスバーを実現するための 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 の他の関連記事に注目してください。 |
Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...
おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...
この記事では、大画面ページのスクリーンアダプテーションを実現するためのVueの具体的なコードを参考ま...
easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...
カスタムパラメータを渡すだけhtml <div id="アプリ"> ...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
1. 設置環境Dockerは次のCentOSバージョンをサポートしていますCentOS 6.5 (6...
1. VMware Workstation 64バージョンをダウンロードするhttps://www....
Baidu の擬似静的の説明を引用します。擬似静的は、実際の静的に相対的です。通常、検索エンジンの使...
多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...
最近、画像はあるのに外部画像リソースが参照されていないウェブページを見つけました。気になりました。コ...
赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...
目次1. 事前準備1.1 Node.jsをインストールする1.2 webpackをインストールする1...
序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...
ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...