CSS を使用してテキストを作成し、フレームごとのアニメーションを実現する方法を段階的に説明します (コード付き)

前回の記事「css3を使ってクールなナビゲーションバー効果を作成する方法をステップバイステップで教えます(詳細なコード説明)」では、css3を使ってクールなナビゲーションを作成する方法を紹介しました。次の記事では、CSS を使用してテキストを作成し、フレームごとのアニメーションを実現する方法を紹介します。

テキストのフレーム単位のアニメーションは、Web ページで最も一般的なコンポーネントです。テキストにフレーム単位のアニメーション効果を追加します。共有しましょう。レンダリング

効果を確認したら、それを実現する方法を検討しましょう

##方法の手順

HTML 部分

1. HTML を作成してテキストを含む

div タイトルを定義し、class 属性を使用してスタイルを設定します。

HTML 編集コードの例

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

コードの効果

##HTML 編集を記述した後、CSS スタイルを使用して変更します。

CSS パート

1. Web ページに背景色を追加します

body{
  background:#333;
}

2.

cell

タイトル テキスト スタイルを使用します。 dashed 属性は要素の境界線のスタイルと色を追加し、position:Absolute 属性を使用して絶対位置を中央に配置します。 コード例

.cell{
    width: 1em;  
    height: 1em;
    border:1px dashed rgba(255,255,255,0.1);
    font-size:120px;
    font-family:Frijole;
    overflow: hidden;
    position:absolute;
    top:50%;
    left:50%;
    margin:-0.5em 0 0  -0.5em;
    opacity:0;
    animation:go 6s;
        transform-origin:left bottom;｝

3,

num

タイトルのテキストスタイルは、animation属性steps()frame-byを使用します。 -フレーム アニメーション、および text-shadow 属性を使用してテキストの影と色を追加し、position:Absolute 属性を使用して絶対位置を中央に配置します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.num{ position:absolute; width: 1em; color:#E53F39; line-height: 1em; text-align: center; text-shadow:1px 1px 2px rgba(255,255,255,.3); animation:run 6s steps(6); }</pre><div class="contentsignin">ログイン後にコピー</div></div>次に、アニメーション効果を追加してテキストを動的にし、フレームごとのアニメーション効果を実現します。

アニメーションアニメーションを num タグにバインドします。

2 つの @keyframes ルールを使用して、2 つのアニメーションの各フレームのアクションを設定します。

@keyframes run{
    0%{top:0;}
    100%{top:-6em;}
}
@keyframes go{
  0%   {opacity:1;}
  84%  {opacity:1;transform:rotate(0deg) scale(1);}
  100% {opacity:0;transform:rotate(360deg) scale(.01);}
}

最終効果

完全なコードを以下に示します

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

【終了】

推奨学習 :

CSS ビデオ チュートリアル

以上がCSS を使用してテキストを作成し、フレームごとのアニメーションを実現する方法を段階的に説明します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。