CSS3は循環回転カウントダウンのコード共有を実現-CSSチュートリアル-php.cn

CSS3は循環回転カウントダウンのコード共有を実現

小云云

リリース： 2018-02-26 09:40:58

オリジナル

2948 人が閲覧しました

質問に答えるための多くの H5 インターフェイスには、下の図のような回転カウントダウン効果、つまり連続的に回転して減少するアニメーションが付いています。この記事では主にCSS3での円回転カウントダウン機能の実装方法を紹介しますので、必要な方は参考にしていただければ幸いです。

今日調べてみたら、ボーダー回転で取得できるんです。一般に、境界線を通る 4 つのセグメントの円を取得できます。

CodePen の stoneniqiu (@stoneniqiu) によるペンの円の回転を参照してください。

次に、それを回転させてカウントダウン効果を形成できます:

) CodePen 。

最初の回転は次のとおりです。半円を直立させるために45度。次に 180 度回転します。

 .rightcircle{
                border-top: .4rem solid #8731fd;
                border-right: .4rem solid #8731fd;
                right: 0;
                transform: rotate(45deg)
            }
 .right_cartoon {
                -webkit-animation: circleProgressLoad_right 10s linear infinite forwards;
                animation: circleProgressLoad_right 10s linear infinite forwards;
            }
 @keyframes circleProgressLoad_right {
                0% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)
                }
                50%,to {
                    -webkit-transform: rotate(-136deg);
                    transform: rotate(-136deg)
                }
            }

ログイン後にコピー

結局のところ、1 つの色が優勢であれば、それを 2 つの半円でつなぎ合わせることができます。

CodePen の stoneniqiu (@stoneniqiu) によるペンサークルタイマーを参照してください。

 @keyframes circleProgressLoad_left {
                0%,50% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)
                }           
                to {
                    -webkit-transform: rotate(-136deg);
                    transform: rotate(-136deg)
                }
            }

ログイン後にコピー

右側の線が 5 秒間回転し、左側でさらに 5 秒間待機することに注目してください。こちらがCSSアニメーションの効果です。少し異なり、右側は0%から始まり、50%から始まります。左側は 0%、50%、そして to で、5 秒の待機を実現します。これは回転カウントダウンの効果です。最後に、左ハーフリングの左端の色を変更して、最後の数秒間の緊急事態を強調表示できます。