ホームページ > 記事 > ウェブフロントエンド > CSS を使用して循環効果を実現するにはどうすればよいですか? (コード例)
CSS を使用して循環効果を実現するにはどうすればよいですか? (コード例)
- 云罗郡主転載
- 2018-10-23 15:13:402161ブラウズ
この記事の内容は、CSS を使用して循環効果を実現する方法についてです。 (コード例) は参考になると思います。
CSS3 アニメーション効果は、変換、トランジション、アニメーションという 3 つの主要な部分で構成されていることは以前からわかっていました。最初の 2 章では、デフォメーション エフェクトとトランジション エフェクトについて詳しく説明しました。この章では、CSS3 の「実際の」アニメーション効果について説明します。
CSS3 では、アニメーション効果はアニメーション属性を使用して実装されます。アニメーション属性とトランジション属性はどちらも要素の「属性値」を変更することでアニメーション効果を実現する機能は同じです。ただし、この 2 つには大きな違いがあります。transition 属性では、属性の開始値と終了値を指定し、2 つの属性値の間でスムーズな遷移を行うことによってのみアニメーション効果を実現できるため、単純なアニメーション効果しか実現できません。 。アニメーション プロパティは、複数のキーフレームを定義し、各キーフレーム内の要素の属性値を定義することで、複雑なアニメーション効果を実装します。
上の段落は非常に価値があり、初心者にとって最もわかりにくい質問「アニメーション属性とトランジション属性の違いは何ですか?」に対する答えが含まれています。最初は理解できないかもしれませんが、この章を読んだ後は、もう一度戻って注意深く読んでください。
CSS3 アニメーション効果の魔法を誰もが感じられるように、最初に例を見てみましょう。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3动画</title>
<style type="text/css">
div
{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
div:hover
{
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>ブラウザでのプレビュー効果は次のとおりです:
分析:
ご覧のとおり、div 要素があります。ここでは背景が表示されています。色は赤です。マウス ポインタが div 要素の上に移動すると、要素の背景色が赤から青、青から黄色、そして黄色から赤に戻ります。
想像してみてください。CSS3 トランジション属性を使用するように求められたら、それを実現できるでしょうか?もちろん違います。なぜなら、トランジション属性は 1 つの変更効果しか実現できないからです。トランジション属性は単純なアニメーション (1 つ) のみを実装できるのに対し、アニメーション属性は複雑なアニメーション (一連) を実装できることがわかります。
上記は、CSS を使用して循環効果を実現する方法についてです。 (コード例) 完全な紹介、CSS3 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がCSS を使用して循環効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。