So implementieren Sie Animationen zur Schriftvergrößerung und -verkleinerung in CSS3-Front-End-Fragen und Antworten-php.cn

So implementieren Sie Animationen zur Schriftvergrößerung und -verkleinerung in CSS3

青灯夜游

Freigeben： 2022-03-15 15:41:41

Original

6382 Leute haben es durchsucht

Implementierungsmethode: 1. Verwenden Sie die Regel „@keyframes“ und die Anweisung „transform:scale (scale);“, um eine Animation zum Vergrößern und Verkleinern der Schriftart zu erstellen name time unlimited;}“-Anweisung zum Skalieren von Animationen kann auf Schriftelemente angewendet werden.

So implementieren Sie Animationen zur Schriftvergrößerung und -verkleinerung in CSS3

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie das Attribut animation, die Regel „@keyframes“ und transform: scale() verwenden, um eine Schriftvergrößerung zu implementieren und Reduktionsanimationanimation属性、“@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>

Nach dem Login kopieren

So implementieren Sie Animationen zur Schriftvergrößerung und -verkleinerung in CSS3

说明：

animation（动画属性）

属性	描述	CSS
@keyframes	定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。	3
animation	复合属性。检索或设置对象所应用的动画特效。	3
animation-name	检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义	3
animation-duration	检索或设置对象动画的持续时间	3
animation-timing-function	检索或设置对象动画的过渡类型	3
animation-delay	检索或设置对象动画的延迟时间	3
animation-iteration-count	检索或设置对象动画的循环次数	3
animation-direction	检索或设置对象动画在循环中是否反向运动	3
animation-play-state	检索或设置对象动画的状态	3

@keyframes

Beispiel:

@keyframes animation-name {keyframes-selector {css-styles;}}

Nach dem Login kopieren

So implementieren Sie Animationen zur Schriftvergrößerung und -verkleinerung in CSS3

Beschreibung:

Animation (Animationsattribut)

< table class=" reference notranslate">EigenschaftBeschreibungCSS@keyframesDefinieren Sie ein Animation, @keyframes Der definierte Animationsname wird von Animationsname verwendet. 3AnimationZusammengesetztes Attribut. Ruft die auf das Objekt angewendeten Animationseffekte ab oder legt diese fest. 3animation-nameRufen Sie den auf das Objekt angewendeten Animationsnamen ab, der in Verbindung mit verwendet werden muss, oder legen Sie ihn fest Die Regel @keyframes. Da der Animationsname durch @keyframes3animation-durationabgerufen oder festgelegt wird Dauer der Objektanimation3animation-timing-functionRuft den Übergangstyp der Objektanimation ab oder legt ihn fest3animation-delayVerzögerungszeit der Objektanimation abrufen oder festlegen3animation-iteration-countRufen Sie die Anzahl der Zyklen der Objektanimation ab oder legen Sie sie fest3< tr>animation-direction Abrufen oder festlegen, ob sich die Objektanimation in der Schleife in umgekehrter Richtung bewegt3animation-play-stateStatus der Objektanimation abrufen oder festlegen3

@ keyframes ist eine CSS3-Regel, mit der das Verhalten eines Zyklus von CSS-Animationen definiert werden kann, um einfache Animationen zu erstellen.

@keyframes-Regeln bestehen aus einer Reihe gekapselter CSS-Stilregeln, die beschreiben, wie sich Attributwerte im Laufe der Zeit ändern.

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}
/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Nach dem Login kopieren

keyframes-selector: Definiert den Prozentsatz der Animation, er liegt zwischen 0 % und 100 %. Eine Animation kann viele Selektoren enthalten.

Anschließend können Sie mithilfe verschiedener CSS-Animationseigenschaften viele verschiedene Aspekte der Animation steuern, einschließlich der Anzahl der Wiederholungen der Animation, ob sie zwischen Start- und Endwerten wechselt und ob die Animation ausgeführt oder angehalten werden soll. Animationen können auch ihre Startzeit verzögern. Eine @keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“, gefolgt von einem Bezeichner, der den Namen der Animation angibt (auf den mit „animation-name“ verwiesen wird), gefolgt von einer Reihe von Stilregeln (getrennt durch geschweifte Klammern). Die Animation wird dann auf das Element angewendet, indem der Bezeichner als Wert des Attributs „animation-name“ verwendet wird.

🎜Syntax: 🎜rrreee🎜Innerhalb der geschweiften Klammern müssen wir Keyframes oder Wegpunkte definieren, die den Wert der animierten Eigenschaft an einem bestimmten Punkt während der Animation angeben. Dadurch können wir Zwischenschritte in der Animationssequenz steuern. 🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜, 🎜Web-Frontend🎜)🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Animationen zur Schriftvergrößerung und -verkleinerung in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!