Animation CSS3 @keyframes L'image devient plus grande, plus petite et la couleur change-tutoriel CSS-php.cn

Animation CSS3 @keyframes L'image devient plus grande, plus petite et la couleur change

青灯夜游

Libérer： 2018-10-10 16:45:14

avant

3439 Les gens l'ont consulté

Lorsque je travaillais sur le site officiel de l'entreprise, j'aidais également à écrire des pages statiques pour le jeu. Le produit d'aujourd'hui exigeait que pour mettre en surbrillance un bouton, celui-ci change de couleur et devienne de plus en plus petit. sur Internet. Pour la lampe respiratoire et d'autres cas, j'ai écrit un petit damo, qui a l'air un peu magique.

html :

<body>
    <p class="color"></p>
    <img class="change" src="img/dongtai.png"/>
</body>

Copier après la connexion

Le principe est le suivant : le corps est positionné relativement, .change est positionné absolument au dessus de .color, la taille est la même que .color, et .color est affiché en premier après le premier rafraîchissement. Ensuite, la transparence de .change change progressivement, et en même temps, les tailles des deux changent également en même temps

CSS

body{
	position: relative;
}
.color{width:308px;height: 174px;background-color: lightskyblue;}
.change{
	position: absolute;
	top: 0;
	left: 0;
	animation-name: mychange;			/*动画的名字*/
	animation-duration: 1000ms;		/*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
	animation-iteration-count: infinite;		/*定义动画的播放次数，这里是无限播放*/
	animation-direction: alternate;			/*定义是否应该轮流反向播放动画，这里是动画轮流播放*/
}
.color{
	animation-name: mycolor;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes mychange{　　　　/*mychange是动画的名字上面有用到*/
	0% {
		opacity: .2;
		width: 308px;
		height: 174px;
	}
	100% {
		opacity: 1;
		width: 358px;
		height: 202px;
	}
}
@keyframes mycolor{
	0% {
		width: 308px;
		height: 174px;
	}
	100% {
		width: 358px;
		height: 202px;
	}
}

Copier après la connexion

Les tailles de .color et .change sont toutes deux de largeur : 308px, hauteur 202px --> Passage à la largeur 358px, hauteur 174px.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo CSS3 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Manuel en ligne CSS3

Tutoriel graphique div/css

Collection de codes d'effets spéciaux CSS3

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!