CSS3で反時計回りのカウントダウンを作成する方法

今回はCSS3で反時計回りのカウントダウンを行う方法と、CSS3で反時計回りのカウントダウンを行うための注意点を紹介します。実際のケースを見てみましょう。

質問に答えるための多くの H5 インターフェイスには、下の図のような回転カウントダウン効果、つまり連続的に回転して減少するアニメーションがあります。

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

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

最初の 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) によるペン サークル -

time

r を参照してください。

 @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 秒の待機を実現します。これは回転カウントダウンの効果です。最後に、左ハーフリングの左端の色を変更して、最後の数秒間の緊急事態を強調表示できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

DataTable プラグインは非同期読み込みを実装できますか?

jQueryがマスターしなければならないAPI

以上がCSS3で反時計回りのカウントダウンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。