1
0
0
背景圖像在您想要的方式中無(wú)法平滑地進(jìn)行動(dòng)畫(huà)處理。
然而，您可以平滑地動(dòng)畫(huà)化不透明度，因此一種獲得效果的方法是將兩個(gè)背景圖像放在彼此上方，並改變它們的不透明度，使它們逐漸從一個(gè)變?yōu)榱硪粋€(gè)。
在您的情況下，您可以將背景圖像放在偽元素的before和after上，而不是放在元素本身上。
它們具有相同的動(dòng)畫(huà)效果，但一個(gè)從中間開(kāi)始（當(dāng)不透明度為1時(shí)）。
當(dāng)總持續(xù)時(shí)間只有1秒鐘時(shí)，很難意識(shí)到這種混合效果，因此此程式碼片段增加了持續(xù)時(shí)間，以便您可以看到效果。
當(dāng)然，您可以根據(jù)需要更改時(shí)序。
更改還是線性的，以便覆蓋始終提供“整體”圖像而不是半透明圖像。
<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>
