コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3 でプログレスバーを実装する 2 つの方法

CSS3 でプログレスバーを実装する 2 つの方法

php中世界最好的语言
リリース： 2018-03-22 10:37:27
オリジナル
3480 人が閲覧しました

今回はCSS3でプログレスバーを実装する2つの方法を紹介します。CSS3でプログレスバーを実装する際の注意点は何ですか?実際のケースを見てみましょう。

エフェクトの画像は次のとおりです:



最初の姿勢は次のとおりです

まずコードに移動します

rreee
<p id="progress">
      <span></span>
</p>
ログイン後にコピー
上のグラデーションカラー

css3 -gradient で Linear を使用します

linear-gradient 構文

/*对应CSS*/
    #progress{
           width: 300px;
           height: 30px;
           border:1px solid #ccc;
           border-radius: 15px;
           overflow: hidden;  /*注意这里*/
           box-shadow: 0 0 5px 0px #ddd inset;
    }          
    #progress span {
           display: inline-block;
           width: 70%;
           height: 100%;       
           background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);    
           background-size: 60px 30px;
           text-align: center;
           color:#fff;
           animation:load 3s ease-in;
     }
     @keyframes load{
           0%{
               width: 0%;
           }
           100%{
               width:70%;
           }
       }
ログイン後にコピー

  • angle: 角度の値を使用して、グラデーションの方向 (または角度) を指定します。

  • 左へ: 右から左へのグラデーションを設定します。同等: 270deg

  • 右へ: 左から右へのグラデーションを設定します。同等: 90deg

  • to top: 下から上へのグラデーションを設定します。以下と同等: 0deg

  • tobottom: 上から下へのグラデーションを設定します。相当：180度これはデフォルト値であり、空白のままにするのと同じです。

  • color-stop: グラデーションの開始色と終了色を指定するために使用されます:

  • color: 色を指定します。

  • length: 長さの値を使用して、開始カラー位置と終了カラー位置を指定します。負の値は許可されません

  • percentage: 開始カラー位置と終了カラー位置をパーセンテージで指定します。

栗: 

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
ログイン後にコピー

レンダリング:


アニメーションはキーフレームで実装されており、スパンの幅を変えることで進行効果を実現しています。 ！

現在の進行状況バーの効果は 70% のみです。下の図のように、幅の値を特定の値に変更します。


第二の姿勢

まず、正方形 p を構築し、以下のように正方形を左右 2 つの部分に対称的に分割します

ここで構築されるのは 200px 200px の正方形です、 2 つの 100px200px の長方形に分割されます。 

.test1{
    background: linear-gradient(#EA2000, #E5A399);
}
.test2 {
    background: linear-gradient(45deg,#EA2000 20%,#E5632D 50%, #E5B12D 80%);
}
.test3 {
    background: linear-gradient(to top right, #000, #416796 50%, #B5CAE4);
}
.test4{
    background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);   
}
ログイン後にコピー
<p class="progress2">
        <p class="rect right">
        </p>                               
        <p class="rect left">
        </p>
 </p>
ログイン後にコピー

次の効果

次に、各長方形に中空の円を作成し、最初に次のように右半分を作成します

.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        border:1px solid #ddd;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden; /*注意这里*/
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }
ログイン後にコピー
<p class="progress2">
        <p class="rect right">
            <p class="circle rightcircle"></p>
        </p>                               
        <p class="rect left">
            
        </p>
 </p>
ログイン後にコピー

次の効果が表示されます


クラス内だから: rect ではオーバーフローを非表示に設定し、オーバーフロー部分をカバーするようにしています。その後のエフェクトの実装もこの属性の関係と密接に関係しています。

この属性が設定されていない場合、効果は次のようになります。


その一部が覆われていることがわかります。45 度回転できます

.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
    }
    .rightcircle{
        border-top:20px solid rgb(41,137,216);
        border-right:20px solid rgb(41,137,216);
        right:0;
    }
ログイン後にコピー

効果は次のとおりです


アニメーション効果を実現する方法は、右に回転することです。半分を 180 度回転させ、次に左半分を 180 度回転させて完全な効果を実現します。

まず、右半分のアニメーション効果を設定します。つまり、最初は 45 度回転し、次に 180 度回転します。これは右半分だけなので、50% で回転する必要があります。その後。 

.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg); /*注意这里*/
    }
ログイン後にコピー

これは、クラスectのoverflow:hiddenを設定しないことによる影響です


 

这是在class rect中设置了overflow：hidden的效果
 


 

现在，我们就可以把左半边也凑上了，同理，动画效果一开始先旋转45度，调正，然后一直保持不变，到50%之后，再开始旋转180度。这样就与右半边衔接上了。

<p class="progress2">
        <p class="rect right">
            <p class="circle rightcircle"></p>
        </p>                               
        <p class="rect left">
            <p class="circle leftcircle"></p>
        </p>
 </p>
ログイン後にコピー
ログイン後にコピー
.leftcircle{
        border-bottom:20px solid rgb(41,137,216);
        border-left:20px solid rgb(41,137,216);
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_left{
        0%{
            transform: rotate(45deg);
        }
        50%{
            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }
ログイン後にコピー

这是整体的效果
 


 

可以调整角度或者调整颜色即可实现反向的效果。
 

我是调整了颜色就可以得到最开始的动画效果啦,下面是完整的代码

<p class="progress2">
        <p class="rect right">
            <p class="circle rightcircle"></p>
        </p>                               
        <p class="rect left">
            <p class="circle leftcircle"></p>
        </p>
 </p>
ログイン後にコピー
ログイン後にコピー
.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }
    .circle{
        width: 160px;
        height: 160px;
        border:20px solid rgb(41,137,216);
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg);
    }
    .rightcircle{
        border-top:20px solid #ccc;
        border-right:20px solid #ccc;
        right:0;
        animation: load_right 5s linear infinite;
    }
    .leftcircle{
        border-bottom:20px solid #ccc;
        border-left:20px solid #ccc;
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_right{
        0%{
            transform: rotate(45deg);
        }
        50%{
            transform: rotate(225deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }
    @keyframes load_left{
        0%{
            transform: rotate(45deg);
        }
        50%{
            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }
ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用CSS3实现头像旋转效动画

css的background-attachment进阶使用方法

css做出波纹动画

以上がCSS3 でプログレスバーを実装する 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css css3
ソース：php.cn
前の記事：CSS の下部にフッターを実装するいくつかの方法 次の記事：CSS では float をクリアする方法が何通りありますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート