首页 > 问答 > 正文

如何实现锥形渐变动画的颜色平滑过渡？

<p>我正在制作一个锥形渐变的动画，但颜色变化不够平滑我看过各种文章，但无法正确复制它们你可以在这里找到我的代码：</p> <pre class="brush:php;toolbar:false;"><style> body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; } .pyramid { width: 500px; height: 500px; background-image: conic-gradient(red 135deg, green 135deg,yellow 165deg, yellow 165deg); clip-path: polygon(50% 50%, 0% 100%, 100% 100%); animation: change 1s ease infinite; } .pyramid:hover{ background-image: conic-gradient(red 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg); } @keyframes change{ 0%{ background-image: conic-gradient(red 135deg, yellow 135deg,yellow 165deg, lightpink 165deg); /*background: red;*/ } 50%{ background-image: conic-gradient(red 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg); } 100%{ background-image: conic-gradient(red 135deg, #565644 135deg,#838314 165deg, #a68f03 165deg) } } </style> </head> <body> <div class="pyramid"> </div> </body></pre> <p>如何使其变化更加平滑</p>

P粉285587590

P粉285587590414 天前470

全部回复(1)我来回复

P粉605233764

P粉6052337642023-09-02 11:46:14

背景图像在您想要的方式中无法平滑地进行动画处理。

然而，您可以平滑地动画化不透明度，因此一种获得效果的方法是将两个背景图像放在彼此上方，并改变它们的不透明度，使它们逐渐从一个变为另一个。

在您的情况下，您可以将背景图像放在伪元素的before和after上，而不是放在元素本身上。

它们具有相同的动画效果，但一个从中间开始（当不透明度为1时）。

当总持续时间只有1秒时，很难意识到这种混合效果，因此此代码片段增加了持续时间，以便您可以看到效果。

当然，您可以根据需要更改时序。

更改还是线性的，以便覆盖始终提供“整体”图像而不是半透明图像。

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

回复

取消回复