CSS3を使用して円形スクロールプログレスバーアニメーションを作成する詳細説明effect_html/css_WEB-ITnose

原文: http://www.cnblogs.com/jr1993/p/4677921.html

テーマ

今日は、CSS 3 を使用して循環スクロールの進行状況を作成する方法を段階的に説明します。バーアニメーションを理解するのは簡単ではありません。それで、それは何ですか？心配しないでください。以前、CSS を使用してプログレス バーの効果を実現することについてのブログを共有しました 「 CSS によるプログレス バーと順序プログレス バーの実装 」、 ただし、そのブログではエフェクトが作成されただけで、何もありませんでした。最終審査期間中だったので、アニメーション作成にかかる時間コストが節約できました。さあ、今日も一緒にさまざまな効果を実感していきましょう！

内容

まず、学習への興味を高める効果の画像を見てみましょう:

さて、この画像の上から下へ順番に説明します。1 番目と 2 番目の効果は次のとおりです。やり方はブログ「プログレスバーとオーダープログレスバーのCSS実装」で紹介済みですここではアニメーションに焦点を当てて詳しく解説していきます。

最初の効果:

html 構造:

<div id="progress">      <span></span></div>

CSS スタイル:

        #progress{            width: 50%;            height: 30px;            border:1px solid #ccc;            border-radius: 15px;            margin: 50px 0 0 100px;            overflow: hidden;            box-shadow: 0 0 5px 0px #ddd inset;        }        #progress span {            display: inline-block;            width: 100%;            height: 100%;            background: #2989d8; /* Old browsers */            background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */            background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */            background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */            background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */            background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */            background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */            background-size: 60px 30px;            text-align: center;            color:#fff;            -webkit-animation:load 3s ease-in;        }        @-webkit-keyframes load{            0%{                width: 0%;            }            100%{                width:100%;            }        }				

この種の進行状況バーのアニメーションは、特定の進行状況の割合に応じてデフォルトの幅のパーセンテージとアニメーションを設定するのが最も簡単であることがわかります。たとえば、幅のパーセンテージを 100% に設定するだけで十分です。進行状況バーのアニメーション効果を 70% にするには、次の 2 か所を変更するだけです:

#progress span{    width: 70%;}@-webkit-keyframes load{      0%{        width: 0%;      }    100%{        width:70%;      }}

2 番目の効果:

html 構造:

<div id="progressBar">      <!-- 进度条 -->      <div>        <span></span>      </div>      <!-- 五个圆 -->      <span></span>      <span></span>      <span></span>      <span></span>      <span></span> </div>

cssスタイル:

       #progressBar{            width: 80%;            height: 50px;            position: relative;            margin: 50px 0 0 100px;        }        #progressBar div{            width: 100%;            height: 10px;            position: absolute;            top:50%;            left: 0;            margin-top:-20px;            background: #ccc;        }        #progressBar div span{            position: absolute;            display: inline-block;            background: green;            height: 10px;            width: 100%;            -webkit-animation:bgLoad 5.5s linear;        }        @-webkit-keyframes bgLoad{            0%{                width: 0%;            }            18.18%,27.27%{                width:25%;            }            45.45%,54.54%{                width: 50%;            }            72.72%,81.81%{                width: 75%;            }            100%{                width:100%;            }        }        #progressBar>span{            position: absolute;            top:0;            margin-top: -10px;            width: 40px;            height: 40px;            border-radius: 50%;            background: #ccc;            margin-left: -20px;            color:#fff;        }        @-webkit-keyframes circleLoad_1{            0%,66.66%{                background: #ccc;            }            100%{                background:green;            }        }        @-webkit-keyframes circleLoad_2{            0%,83.34%{                background: #ccc;            }            100%{                background:green;            }        }        @-webkit-keyframes circleLoad_3{            0%,88.88%{                background: #ccc;            }            100%{                background:green;            }        }        @-webkit-keyframes circleLoad_4{            0%,91.67%{                background: #ccc;            }            100%{                background:green;            }        }        #progressBar span:nth-child(2){            left: 0%;background:green;        }        #progressBar span:nth-child(3){            left: 25%;background:green;            -webkit-animation:circleLoad_1 1.5s ease-in;        }        #progressBar span:nth-child(4){            left: 50%;background:green;            -webkit-animation:circleLoad_2 3s ease-in;        }        #progressBar span:nth-child(5){            left: 75%;background:green;            -webkit-animation:circleLoad_3 4.5s ease-in;        }        #progressBar span:nth-child(6){            left: 100%;background:green;            -webkit-animation:circleLoad_4 6s ease-in;        }						

ご覧のとおり、アニメーション自体は一目で理解できます このアニメーション効果は 1 回だけ実行されるため、アニメーションの遅延時間は計算されます。各アニメーションが指定された時点で実行を開始するようにするために使用することもできますが、ループまたは複数のアニメーション効果の場合、遅延は非常に柔軟性に欠けるため、アニメーションの実行時間を制御するために継続時間が使用されます。

この注文プログレスバーでは、1 秒間実行し、ドットに到達するたびに 0.5 秒間一時停止するように設定しました。この 0.5 秒は、対応するドットのアニメーションの継続時間です。ただし、

これは単一のアニメーションであることをもう一度強調します。ループ アニメーションを実装したい場合は、すべてのアニメーションの連続実行時間を同じにする必要があります。そうしないと、ループが混乱してしまいます。時間の変更はアニメーションのキーフレームの変更にも影響します最初のセグメントと 2 番目の円のアニメーション時間については以下で説明します:

まず、細いバーのアニメーション時間を計算します:

4 つのセグメント。 x1 秒 + 真ん中の 3 つのドット 各ドットは 100% を 11 で割ると、各部分は約 9.09% になります。これは簡単です。言うほどのことではありません。

次に、細いバーがアニメーション効果の最初の短いセグメントを完了し、2 番目のドットに到達すると、0.5 秒間一時停止します。この 0.5 秒は 2 番目のドットのアニメーション時間であるため、2 番目のドットのアニメーションは継続時間は:

細いバーの実行が完了するのを待ちます 1 つの短いセグメント x 1 秒 + 自身のアニメーション完了時間 ｘ0.5 秒 = 1.5 秒

同様に各パートの時間を計算して割り当てます。

同様に、他のアニメーション効果も同様であるため、詳細は説明しません。

3 番目のエフェクト:

今日はこのエフェクトの説明に重点を置きます。まず、誰かが円形のプログレス バー エフェクトを作成できるかどうか尋ねた場合、それが静的な完全な円形のプログレス バーであれば、それは非常に効果的です。シンプル:

.circleprogress{    width: 160px;    height: 160px;    border:20px solid red;    border-radius: 50%;}

すると、彼はこう言います、これはとても簡単です。しかし、それが完全な円でない場合はどうなるでしょうか?それについて考えた後：

.circleprogress{    width: 160px;    height: 160px;    border:20px solid red;    border-left:20px solid transparent;    border-bottom:20px solid transparent;    border-radius: 50%;}

それでも私は、これは難しいことではないと言いました。しかし、すべてが 45 度の倍数ではない場合はどうなるでしょうか?

OK、まず 200×200 の正方形を設定してから、ここでエフェクトを完成させましょう:

.circleProgress_wrapper{    width: 200px;    height: 200px;    margin: 50px auto;    position: relative;    border:1px solid #ddd;}

次に、このコンテナにさらに 2 つの長方形を配置し、それぞれの長方形が半分を占めます:

<div class="circleProgress_wrapper">        <div class="wrapper right">            <div class="circleProgress rightcircle"></div>        </div>        <div class="wrapper left">            <div class="circleProgress leftcircle"></div>        </div> </div>

.wrapper{    width: 100px;    height: 200px;    position: absolute;    top:0;    overflow: hidden;}.right{    right:0;}.left{    left:0;}

ここでは、重要な役割を果たすラッパーの overflow:hidden; に焦点を当てます。どちらの四角形にもオーバーフロー非表示が設定されているため、四角形の内側で円を回転させると、オーバーフロー部分が非表示になり、目的の効果を得ることができます。

左右の長方形の中に円があることも

.circleProgress{    width: 160px;    height: 160px;    border:20px solid transparent;    border-radius: 50%;    position: absolute;    top:0;}.rightcircle{    border-top:20px solid green;    border-right:20px solid green;    right:0;}

実際に効果が出ていることがわかります。は元々は半円弧ですが、上と右の境界線を設定したため、上の境界線の半分がはみ出して隠れてしまったので、回転させることで元に戻すことができます。進行状況ストリップの任意の割合を達成できます。次に、左の半円弧を認識し、それを完全な円に変えます:

.circleProgress{    width: 160px;    height: 160px;    border:20px solid transparent;    border-radius: 50%;    position: absolute;    top:0;    -webkit-transform: rotate(45deg);}

紧接着，就是让它动起来，原理是这样的， 先让右半圆弧旋转180度，再让左半圆弧旋转180度 ，这样，两个半圆弧由于先后都全部溢出而消失了，所以看起来就是进度条再滚动的效果：

        .rightcircle{            border-top:20px solid green;            border-right:20px solid green;            right:0;            -webkit-animation: circleProgressLoad_right 5s linear infinite;        }        .leftcircle{            border-bottom:20px solid green;            border-left:20px solid green;            left:0;            -webkit-animation: circleProgressLoad_left 5s linear infinite;        }        @-webkit-keyframes circleProgressLoad_right{            0%{                -webkit-transform: rotate(45deg);            }            50%,100%{                -webkit-transform: rotate(225deg);            }        }        @-webkit-keyframes circleProgressLoad_left{            0%,50%{                -webkit-transform: rotate(45deg);            }            100%{                -webkit-transform: rotate(225deg);            }        }				

当然，我们只需要调整一下角度就可以实现反向的效果：

        .circleProgress{            width: 160px;            height: 160px;            border:20px solid transparent;            border-radius: 50%;            position: absolute;            top:0;            -webkit-transform: rotate(-135deg);        }        @-webkit-keyframes circleProgressLoad_right{            0%{                -webkit-transform: rotate(-135deg);            }            50%,100%{                -webkit-transform: rotate(45deg);            }        }        @-webkit-keyframes circleProgressLoad_left{            0%,50%{                -webkit-transform: rotate(-135deg);            }            100%{                -webkit-transform: rotate(45deg);            }        }				

好的，接下来就是奔向最终效果了，正如我们一开始看到的那样，有点像我们使用360卫士清理垃圾时的类似效果，当然不是很像啦：

        .circleProgress_wrapper{            width: 200px;            height: 200px;            margin: 50px auto;            position: relative;            border:1px solid #ddd;        }        .wrapper{            width: 100px;            height: 200px;            position: absolute;            top:0;            overflow: hidden;        }        .right{            right:0;        }        .left{            left:0;        }        .circleProgress{            width: 160px;            height: 160px;            border:20px solid rgb(232, 232, 12);            border-radius: 50%;            position: absolute;            top:0;            -webkit-transform: rotate(45deg);        }        .rightcircle{            border-top:20px solid green;            border-right:20px solid green;            right:0;            -webkit-animation: circleProgressLoad_right 5s linear infinite;        }        .leftcircle{            border-bottom:20px solid green;            border-left:20px solid green;            left:0;            -webkit-animation: circleProgressLoad_left 5s linear infinite;        }        @-webkit-keyframes circleProgressLoad_right{            0%{                border-top:20px solid #ED1A1A;                border-right:20px solid #ED1A1A;                -webkit-transform: rotate(45deg);            }            50%{                border-top:20px solid rgb(232, 232, 12);                border-right:20px solid rgb(232, 232, 12);                border-left:20px solid rgb(81, 197, 81);                border-bottom:20px solid rgb(81, 197, 81);                -webkit-transform: rotate(225deg);            }            100%{                border-left:20px solid green;                border-bottom:20px solid green;                -webkit-transform: rotate(225deg);            }        }        @-webkit-keyframes circleProgressLoad_left{            0%{                border-bottom:20px solid #ED1A1A;                border-left:20px solid #ED1A1A;                -webkit-transform: rotate(45deg);            }            50%{                border-bottom:20px solid rgb(232, 232, 12);                border-left:20px solid rgb(232, 232, 12);                border-top:20px solid rgb(81, 197, 81);                border-right:20px solid rgb(81, 197, 81);                -webkit-transform: rotate(45deg);            }            100%{                border-top:20px solid green;                border-right:20px solid green;                border-bottom:20px solid green;                border-left:20px solid green;                -webkit-transform: rotate(225deg);            }        }				

可以看到，其实就是多了一些改变不同边框颜色的动画而已，这个就给大家自己去实践吧！ 主要还是利用两个矩形来完成这么一个圆形进度条效果，特别注意overflow这条规则，起着关键作用。