Maison >interface Web >tutoriel CSS >Animation CSS3 @keyframes L'image devient plus grande, plus petite et la couleur change
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>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;
}
} 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
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!