CSS3を使用して色付きのプログレスバースタイルを作成する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3を使用して色付きのプログレスバースタイルを作成する方法

不言

Jun 20, 2018 pm 05:59 PM

css3 プログレスバー

この記事では、CSS3 を使用してカラープログレスバースタイルを作成する方法を主に紹介します。必要な友達はそれを参照できるように共有します。

CSS3 の border-radius、box-shadow、transition を使用します。、-moz-linear-gradient、-webkit-gradient およびその他のスタイルを使用すると、ファッショナブルなプログレスバーを完成させることができます。ここでは、色付きのプログレスバースタイルを作成するための CSS3 コードの例をいくつか見ていきます。

1. 静的な紫色のストライプのプログレスバーを作成します。
html コード:

<body>
<p class="progress-bar purple"> <span style="width:40%;"></span> </p>
</body>

ログイン後にコピー

css コード:

body {   
 background-color:#333;   
}   
.progress-bar {   
 background-color:#222;   
 border-radius:3px;   
 width:300px;   
 height:24px;   
 padding:5px;   
 margin:50px;   
 border-bottom:1px solid #444;   
 box-shadow:inset 0 0 2px 0 #000;   
}   
.progress-bar span {   
 display:inline-block;   
 width:140px;   
 height:24px;   
        border-radius:2px;   
 box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
 -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
 -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;   
}   
.purple span{   
 background-color:#F09;   
 background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);   
 background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));   
 background-size:16px 16px;   
}

ログイン後にコピー

最終的な効果は以下のようになります:
2016623121249918.jpg (340×70)

2. 静的な青色のプログレスバーを作成します
html コード:

りー

css コード:

<p class="progress-bar orange"> <span style="width:60%;"></span> </p>

ログイン後にコピー

最終的な効果は以下のようになります:
2016623121331800.jpg (330×50)

3. 静的な緑色の進行状況バーを作成します
html コード:

.orange span{   
 background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));   
 background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);   
}

ログイン後にコピー

css コード:

<p> <span style="width:80%;"></span> </p>

ログイン後にコピー

決勝効果は次のとおりです。図に示すように:
2016623121411191.jpg (325×43)

4. 紫色のストライプに動的効果を追加します
CSS コード:

.green span{   
 background-color:#00ff24;   
 box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;   
 -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
 -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
}

ログイン後にコピー

マウスをその上に置くと、動的効果が表示されます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7518

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

HTML と CSS を使用して進行状況バーの色を設定するにはどうすればよいですか? Sep 19, 2023 pm 08:25 PM

Web サイト開発において、進行状況バーは Web サイトの重要な部分です。プログレスバーはプロセスの進行状況を示します。これを利用すると、ユーザーは、読み込み時間、ファイルのアップロード、ファイルのダウンロード、その他の同様のタスクを含む、Web サイト上で行われている作業のステータスを確認できます。デフォルトでは灰色です。ただし、進行状況バーを目立たせて視覚的に魅力的にするために、HTML と CSS を使用して色を変更できます。プログレスバーとは何ですか?進行状況バーは、タスクの進行状況を示すために使用されます。これはグラフィカルユーザーインターフェイス要素です。これは基本的に、タスクの進行に応じて徐々に埋まっていく水平バーと、パーセンテージ値またはその他の完了インジケーターで構成されます。プログレスバーは、ファイルのアップロード、ファイルのダウンロード、ソフトウェアのインストールなどのプロセスの完了に関する情報をユーザーに提供するために Web アプリケーションで使用されます。

JavaScriptでページ読み込みプログレスバー機能を実装するにはどうすればよいですか? Oct 27, 2023 am 08:57 AM

JavaScript はページ読み込みの進行状況バー機能をどのように実装しますか?最新のインターネットアプリケーションでは、ページの読み込み速度がユーザーエクスペリエンスの重要な要素の 1 つです。ユーザーに読み込みプロセスを示すために、多くの Web サイトやアプリケーションは読み込み進行状況バーを使用しています。 JavaScript は、ページ読み込みの進行状況バー機能を実装する簡単かつ効果的な方法を提供します。具体的な実装プロセスは次のとおりです: HTML 構造の作成. まず、ページ上の適切な位置にプログレスバーの HTML 構造を作成します。

Vue を使用してプログレスバー効果を実装する方法 Sep 19, 2023 am 09:22 AM

Vue を使用してプログレスバー効果を実装する方法プログレスバーは、タスクまたは操作の完了を表示するために使用できる一般的なインターフェイス要素です。 Vue フレームワークでは、単純なコードを通じてプログレスバーの特殊効果を実装できます。この記事では、Vue を使用してプログレスバー効果を実装する方法を紹介し、具体的なコード例を示します。 Vue コンポーネントの作成まず、プログレスバー機能を実装するために Vue コンポーネントを作成する必要があります。 Vue では、コンポーネントは再利用可能であり、複数の場所で使用できます。 Pro という名前のファイルを作成します

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。