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>