- 原生基礎
- HTML| CSS| HTML5| CSS3| JavaScript
最新推薦
-
30分鐘學會網站佈局
152542 人學習
最新推薦
-
你的第一行UNI-APP程式碼
5487 人學習
-
Flutter 從頭到應用程式啟動
7821 人學習
最新推薦
-
AXURE 9影片教學（適用於產品經理互動產品設計UI）
3350 人學習
-
零基礎PS影片教學
180660 人學習
-
16天帶你入門UI視頻教程
48569 人學習
-
PS技巧和切片技巧影片教學
18603 人學習
最新推薦
-
阿裡雲環境搭建以及項目上線視頻教程
40936 人學習
-
電腦網路概述－程式設計師必須掌握的基礎知識
1549 人學習
-
程式設計師必備教學——HTTP協定講解
1183 人學習
-
Websocket影片教學
32909 人學習
背景圖像在您想要的方式中無法平滑地進行動畫處理。
然而，您可以平滑地動畫化不透明度，因此一種獲得效果的方法是將兩個背景圖像放在彼此上方，並改變它們的不透明度，使它們逐漸從一個變為另一個。
在您的情況下，您可以將背景圖像放在偽元素的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>