Comment implémenter une animation d'agrandissement et de réduction de police en CSS3

青灯夜游
Libérer: 2022-03-15 15:41:41
original
6375 Les gens l'ont consulté

Méthode d'implémentation : 1. Utilisez la règle "@keyframes" et l'instruction "transform:scale (scale);" pour créer une animation de zoom avant et arrière de police 2. Utilisez l'élément "font element {animation: animation" name time infinite;}" instruction pour mettre à l'échelle L'animation peut être appliquée aux éléments de police.

Comment implémenter une animation d'agrandissement et de réduction de police en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut animation, la règle "@keyframes" et transform: scale() pour implémenter l'agrandissement des polices et animation de réductionanimation属性、“@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>
Copier après la connexion

Comment implémenter une animation dagrandissement et de réduction de police en 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

Exemple :

@keyframes animation-name {keyframes-selector {css-styles;}}
Copier après la connexion
     Comment implémenter une animation dagrandissement et de réduction de police en CSS3
  • Description :

  • animation (attribut d'animation)
< table class=" référence notranslate">PropriétéDescriptionCSS@keyframesDéfinir un animation, @keyframes Le nom de l'animation défini est utilisé par animation-name. 3animationAttribut composite. Récupère ou définit les effets d’animation appliqués à l’objet. 3animation-nameRécupérer ou définir le nom de l'animation appliqué à l'objet, qui doit être utilisé conjointement avec la règle @keyframes Parce que le nom de l'animation est défini par @keyframes3animation-durationRécupère ou définit le durée de l'animation de l'objet3animation-timing-functionRécupère ou définit le type de transition de l'animation de l'objet3animation-delayRécupérer ou définir le temps de retard de l'animation d'un objet3animation-iteration-countRécupérer ou définir le nombre de cycles d'animation d'objet3< tr>animation-direction Récupérer ou définir si l'animation de l'objet se déplace dans le sens inverse dans la boucle3animation-play-stateRécupérer ou définir l'état de l'animation de l'objet3

@ les images clés sont une règle de CSS3 qui peut être utilisée pour définir le comportement d'un cycle d'animations CSS pour créer des animations simples.

Les règles @keyframes sont composées d'un ensemble de règles de style CSS encapsulées qui décrivent comment les valeurs d'attribut changent au fil du temps.

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

keyframes-selector : Définit le pourcentage d'animation, il est compris entre 0% et 100%. Une animation peut contenir de nombreux sélecteurs.

Ensuite, en utilisant différentes propriétés d'animation CSS, vous pouvez contrôler de nombreux aspects différents de l'animation, notamment le nombre d'itérations de l'animation, si elle alterne entre les valeurs de début et de fin et si l'animation doit s'exécuter ou être mise en pause. Les animations peuvent également retarder leur heure de début. Une règle @keyframe est constituée du mot-clé "@keyframe", suivi d'un identifiant donnant le nom de l'animation (qui sera référencée à l'aide de animation-name), suivi d'un ensemble de règles de style (délimitées par des accolades). L'animation est ensuite appliquée à l'élément en utilisant l'identifiant comme valeur de l'attribut animation-name.

🎜Syntaxe : 🎜rrreee🎜À l'intérieur des accolades, nous devons définir des images clés ou des waypoints qui spécifient la valeur de la propriété animée à un moment précis de l'animation. Cela nous permet de contrôler les étapes intermédiaires de la séquence d'animation. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜tutoriel vidéo CSS🎜, 🎜front-end web🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal