简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment obtenir une transition de couleur fluide d'une animation à dégradé effilé ?
P粉285587590
P粉285587590 2023-09-01 16:37:22
0
1
494
<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>
P粉285587590
P粉285587590

répondre à tous(1)
P粉605233764
P粉6052337642023-09-02 11:46:14 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！