CSS3学習ページ読み込みアニメーション(2)-CSSチュートリアル-php.cn

CSS3学習ページ読み込みアニメーション(2)

青灯夜游

リリース： 2018-10-15 15:51:23

転載

2831 人が閲覧しました

この記事では、6 種類の CSS3 ページ読み込みアニメーションを紹介します。困っている友人は参考にしていただければ幸いです。

前回の記事【CSS3学習ページの読み込みアニメーション(1)】でCSS3の読み込みアニメーションを4つ紹介しましたが、今日はその続きをしていきます(タイトルは前回からの続きです)。

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

5. エフェクト 5

##ボールが階段を登るエフェクト、これは初めて見たエフェクトで、少し複雑かなと思っていましたが、書いてみるとそれほど難しくないと思いました。

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

{animation: step_mv 1.8s linear infinite;}<br>@keyframes step_mv {<br>      0%{<br>        right: 0;<br>        top: 0;<br>        opacity: 0.6;<br>      }<br>      50%{<br>        opacity: 1;<br>      }<br>      100%{<br>        right: 100%;<br>        top: 100%;<br>        opacity: 0.6;<br>      }<br>    }<br>

ログイン後にコピー

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

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

ログイン後にコピー

6、効果 6

## これ効果は比較的シンプルです。

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

7. 効果7

##このエフェクトシェイプの作成は前の方法と同じですが、今回は追加の境界線が追加され、まだ回転している点が異なります。詳細には触れず、キーフレームを直接入力します。アニメーションコード。

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

ログイン後にコピー

8、効果 8

## これ外側の大きな円の作り方については詳しく説明しません。内側の小さな円のサイズを変更するだけです。

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

ログイン後にコピー

9. エフェクト 9

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

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

ログイン後にコピー

10. 効果 10

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

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

ログイン後にコピー

(続く)

今日はここで共有しますが、後ほどさらに公開する予定です。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、 CSS 基礎ビデオチュートリアル、 CSS3 ビデオチュートリアル、bootstrap チュートリアルをご覧ください。

以上がCSS3学習ページ読み込みアニメーション(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。