国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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
656
<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

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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal