Comment obtenir une transition de couleur fluide d'une animation à dégradé effilé ?
P粉285587590
2023-09-01 16:37:22
<p>J'anime un dégradé effilé, mais le changement de couleur n'est pas assez fluide
J'ai consulté différents articles mais je n'arrive pas à les reproduire correctement
Vous pouvez trouver mon code ici : </p>
<pre class="brush:php;toolbar:false;"><style>
corps{
hauteur min : 100vh ;
affichage : flexible ;
aligner les éléments : centre ;
justifier-contenu : centre ;
}
.pyramide {
largeur : 500 px ;
hauteur : 500 px ;
image d'arrière-plan : dégradé conique (rouge 135 degrés, vert 135 degrés, jaune 165 degrés, jaune 165 degrés) ;
chemin de détourage : polygone (50 % 50 %, 0 % 100 %, 100 % 100 %) ;
animation : changement 1s facilité infinie ;
}
.pyramide:survol{
image d'arrière-plan : dégradé conique (rouge 135 degrés, #cadfca 135 degrés, #dddd3f 165 degrés, #aeae30 165 degrés) ;
}
@changement d'images clés{
0 %{
image d'arrière-plan : dégradé conique (rouge 135 degrés, jaune 135 degrés, jaune 165 degrés, rose clair 165 degrés) ;
/*fond : rouge;*/
}
50 %{
image d'arrière-plan : dégradé conique (rouge 135 degrés, #cadfca 135 degrés, #dddd3f 165 degrés, #aeae30 165 degrés) ;
}
100 %{
image d'arrière-plan : dégradé conique (rouge 135 degrés, # 565644 135 degrés, # 838314 165 degrés, # a68f03 165 degrés)
}
}
</style>
≪/tête>
<corps>
<div class="pyramide">
</div>
</corps></pré>
<p>Comment rendre les modifications plus fluides</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Les images d'arrière-plan ne s'animent pas correctement comme vous le souhaitez.
Cependant, vous pouvez animer l'opacité en douceur, donc une façon d'obtenir l'effet est de placer deux images d'arrière-plan l'une sur l'autre et de modifier leur opacité afin qu'elles passent progressivement de l'une à l'autre.
Dans votre cas, vous pouvez mettre l'image de fond sur l'avant et l'après du pseudo-élément plutôt que sur l'élément lui-même.
Ils ont la même animation, mais on commence au milieu (quand l'opacité est de 1).
Il est difficile de réaliser l'effet de mélange lorsque la durée totale n'est que de 1 seconde, donc cet extrait de code augmente la durée afin que vous puissiez voir l'effet.
Bien sûr, vous pouvez modifier le timing selon vos besoins.
Les changements sont également linéaires afin que la superposition fournisse toujours une image « entière » plutôt qu'une image semi-transparente.
<style> body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .pyramid { width: 500px; height: 500px; clip-path: polygon(50% 50%, 0% 100%, 100% 100%); position: relative; } .pyramid::before, .pyramid::after { position: absolute; content: ''; width: 100%; height: 100%; --duration: 10s; /* set the duration to whatever you want */ animation: change var(--duration) linear infinite forwards; opacity: 0; } .pyramid::after { animation-delay: calc(var(--duration) / -6); } @keyframes change { 0% { background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg); opacity: 0; } 16.666% { opacity: 1; background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg); } 32% { opacity: 0; background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg); } 33.333% { background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg); opacity: 0; } 50% { opacity: 1; background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg); } 65% { opacity: 0; background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg); } 66.666% { opacity: 0; background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg) } 83.333% { opacity: 1; background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg) } 99%, 100% { opacity: 0; background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg) } } @keyframes change2 { 0% { background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg); /*background: red;*/ } 0% { background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg); } 50% { background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg) } } </style> </head> <body> <div class="pyramid"> </div> </body>