How to achieve smooth color transition of tapered gradient animation?
P粉285587590
2023-09-01 16:37:22
<p>I'm animating a tapered gradient, but the color change isn't smooth enough
I've looked at various articles but can't reproduce them correctly
You can find my code here: </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>How to make the changes smoother</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The background image does not animate smoothly in the way you want.
However, you can animate opacity smoothly, so one way to get the effect is to place two background images on top of each other and change their opacity so that they gradually change from one to the other.
In your case, you can put the background image on the before and after of the pseudo-element instead of on the element itself.
They have the same animation effect, but one starts in the middle (when opacity is 1).
It's hard to realize the blending effect when the total duration is only 1 second, so this code snippet increases the duration so you can see the effect.
Of course, you can change the timing as needed.
The changes are also linear so that the overlay always provides a "whole" image rather than a semi-transparent image.