ホームページ > 記事 > ウェブフロントエンド > css3でフォントの拡大・縮小アニメーションを実装する方法
css3でフォントの拡大・縮小アニメーションを実装する方法
- 青灯夜游オリジナル
- 2022-03-15 15:41:416373ブラウズ
実装方法: 1.「@keyframes」ルールと「transform:scale(scale);」ステートメントを使用してフォント拡大縮小アニメーションを作成; 2.「フォント要素{アニメーション:アニメーション名」を使用time unlimited;} ” ステートメントは、スケーリング アニメーションをフォント要素に適用します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS では、animation 属性、「@keyframes」ルール、transform:scale() を使用してフォントを実現できます。増幅ズームアウトアニメーション
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*css部分*/
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(1);/*开始为原始大小*/
}
25% {
transform: scale(1.5);/*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.5);
}
}
.ballon {
width: 150px;
height: 200px;
margin: 100px auto;
-webkit-animation-name: scaleDraw;/*关键帧名称*/
-webkit-animation-timing-function: ease-in-out;/*动画的速度曲线*/
-webkit-animation-iteration-count: infinite;/*动画播放的次数*/
-webkit-animation-duration: 5s;/*动画所花费的时间*/
/*可以简写为*/
/* animation: scaleDraw 5s ease-in-out infinite; */
/* -webkit-animation: scaleDraw 5s ease-in-out infinite; */
}
</style>
</head>
<body>
<div class="ballon">欢迎来到PHP中文网</div>
</body>
</html>
##手順:
animation(アニメーション属性)
| 説明 | CSS | |
|---|---|---|
| アニメーションを定義します。@keyframes で定義されたアニメーション名は、アニメーション名で使用されます。 | 3 | |
| 複合属性。オブジェクトに適用されるアニメーション効果を取得または設定します。 | 3 | |
| オブジェクトに適用されるアニメーション名を取得または設定します。これはルール @keyframes と組み合わせて使用する必要があります。アニメーション名は @keyframes 定義によって決定されるため、 | #3 | |
| オブジェクト アニメーションの継続時間を取得または設定します | 3 | ##animation-timing-function |
| 3 | animation-lay | |
| 3 | ##animation-iteration-count | |
| 3 | animation-direction | |
| 3 | animation-play-state | |
| 3 |
@keyframes ルールは、属性値が時間の経過とともにどのように変化するかを記述する、カプセル化された CSS スタイル ルールのセットで構成されます。 <pre class="brush:js;toolbar:false">@keyframes animation-name {keyframes-selector {css-styles;}}</pre>
keyframes-selector: アニメーションの割合を 0% から 100% の間で定義します。アニメーションには多くのセレクターを含めることができます。
次に、さまざまな CSS アニメーション プロパティを使用して、アニメーションの反復回数、開始値と終了値を交互に切り替えるかどうか、アニメーションなど、アニメーションのさまざまな側面を制御できます。実行するか一時停止するか。アニメーションによって開始時間が遅れることもあります。
@キーフレーム ルールは、キーワード「@keyframe」、その後にアニメーションの名前を指定する識別子 (アニメーション名を使用して参照されます)、その後に一連のスタイル ルール (カーリーで区切られたもの) で構成されます。ブレース） 。次に、アニメーション名属性の値として識別子を使用して、アニメーションが要素に適用されます。
構文:
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}中括弧内で、アニメーション中の特定の時点でアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーション シーケンスの中間ステップを制御できるようになります。
(学習ビデオ共有:
css ビデオ チュートリアル、
Web フロントエンド以上がcss3でフォントの拡大・縮小アニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。