css3でプルアッププロンプトのポインタアニメーションを実装する例を詳しく解説

今日実装する内容は以下の図の通りです:

CSS3のアニメーションプロパティを使用すると、実装は非常に簡単です。

html レイアウト:

<p class="pointer">
   <p></p>
</p>

.pointer の p を表示したい場所に配置します。上に移動するため、p の高さは矢印の高さより 10 ピクセル高くなります。

CSS スタイル:

.pointer{
    position: absolute;
    height: 3.8rem;
    bottom: 3rem;
    width: 100%;
}
.pointer p{
    animation: anima-pointer 2s infinite;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1.4rem;
    height: 2.8rem;
    width: 2.8rem;
    background: url("../images/css-sprites.png") -63px 0;
}

/*animation*/
@keyframes anima-pointer
{
    0%   {opacity:0;bottom:0}
    100%  {opacity:1;bottom:10px;}
}

どれ。これは私のプロジェクトのコードです。それでも .pointer の p を配置する必要があるため、position:absolute を使用して、矢印 p を親要素に対して絶対的に配置できるようにすることができます。

アニメーションに焦点を当てます:
CSS アニメーションを使用するには、まず @keyframes を使用してアニメーションを宣言する必要があります。ここでは 0% でアニメーションを表示せずにそのままにして、100 に遷移します。 % 不透明度 1 で表示して配置すると、元の位置より 10px 上がっています。
矢印 p のスタイルにアニメーションを使用する場合は、アニメーションを使用します。宣言したばかりのアニメーションといくつかのアニメーション属性に従います。特定のアニメーション プロパティについては、w3c 公式ドキュメントを参照してください。ここで宣言されているプロパティは、アニメーションが 2 秒間継続することと、アニメーションが無限ループで実行されることです。

以上がcss3でプルアッププロンプトのポインタアニメーションを実装する例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。