CSS3-アニメーションによる読み上げ効果の実装

前回 4 つの CSS3 読み込みアニメーションを共有しましたが、今日はその続きです (タイトルは前回からの続きです)。

オンライン デモ: http://liyunpei.xyz/loading.html (継続的に更新)

注意: コード内のキーフレーム アニメーションの一部は線形カーブを使用し、他のものはイーズ カーブを使用します。前者は一定の速度で実行され、アニメーション全体は固定速度で実行されます。後者には加速フェーズと減速フェーズがあり、アニメーションの開始時に加速し、アニメーションが終了しようとすると減速します。アニメーションを 50% に設定すると、50% % に近づくとアニメーションが遅くなり始め、50% を超えるとアニメーションが加速し始めます。これは、ページ。エフェクト 7 と 8 が最も明白です)

5 番目、エフェクト 5

このエフェクトを初めて見たとき、私はそう思いました。少し複雑になりますが、書いてみるとそれほど難しくないと思いました。

まず、階段を右上隅に配置し、右上から左下にモーション アニメーションを実行し、各階段のアニメーション遅延値を設定します (ここでは 3 つの階段を使用し、合計持続時間は 1.8 秒でした)アニメーション遅延値はそれぞれ 0s、-0.6s、-12s です)

{:;:;:;
      }{:;
      }{:;:;:;
      }

次に、ボールと階段の間の接触点を決定します。ボールはこの接触点を最低のベンチマークとして使用します。同時に、ボールの上昇と下降中に幅と高さを変更します。ボールの鼓動がよりリアルになります。ボールが各階段に確実に接触できるように、ボール アニメーションの移動時間は階段アニメーションの遅延時間と同じです。

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}@keyframes jump {  50%{
        top: 60%;
      }}
    @keyframes jump_S {  5%{
        height: 25px; //下降过程width: 15px;
      }  54%{height: 20px;//到达底部width: 20px;
      }  55%{height: 25px;//上升过程width: 15px;
      }  98%{height: 20px;//到达顶点width: 20px;
      }}

6. 効果6

この効果は比較的単純です。

長方形の div、境界線と丸い角を設定し、境界線のいずれかの色を継承に設定します (つまり、border-left/bottom/top/right-color:transparent)。このようにして、親は要素に枠線の色はなく、こちら側の枠線は無色で隙間のある円を形成します。 次に回転アニメーションを設定するだけでOKです。 (コードは投稿されません)

7. エフェクト 7

このエフェクトシェイプの作成は、今回は追加の境界線が追加されたことを除いて、前のものと同じです。追加すると回転します。これ以上は言いません。キー フレーム アニメーション コードに移動するだけです。

{animation: rotate_bors 2s ease infinite;}//大圆
{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {  50%{
        transform: rotateZ(180deg);
      }  100%{transform: rotateZ(360deg);
      }}

8. エフェクト 8

このエフェクトも、外側の大きな円の作り方についてはあまり言いません。内側の小さな円のサイズを変更するだけです。

{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw {  50%{
        width: 15px;height: 15px;
      }}

ナイン、エフェクト 9

すべてのボールをインラインブロック要素として設定し、親要素に text-align: center を指定してボールを水平方向に中央揃えにし、Set を渡しますボールを垂直方向の中央に配置するための行の高さ。次に、キーフレーム アニメーションを使用して、ボールの長さ、幅、左右の余白を変更します。

{animation: margin 1s linear infinite;}@keyframes margin {  50%{
        margin:0 10px;width: 10px;height: 10px;
      }}

テン、エフェクトテン

ボールをインラインブロックとして設定し、水平方向の中央に置くだけで、外側のマージンを設定して、ボール間の距離を調整できます。ボールの距離を調整し、キーフレームを通じてボールのtranslateY値を設定します。 (各ボール間の遅延は均等に分割する必要はなく、その差を小さくすることができます)

{animation: trans 1.2s ease infinite;}@keyframes trans {  50%{
        opacity: 1;transform: translateY(30px);
      }  70%{opacity: 1;transform: translateY(30px);
      }  100%{opacity: 0;transform: translateY(60px);
      }}

(続く)

以上がCSS3-アニメーションによる読み上げ効果の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。