這篇文章帶給大家的內容是關於如何使用純CSS 實現一個沒有DOM元素的動畫效果,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
#沒有 dom 元素,直接寫 css。
設定頁面空間:
body { position: fixed; margin: 0; width: 100vw; height: 100vh; }
用偽元素設定背景圖案:
body::before { content: ''; position: fixed; width: 200vmax; height: 200vmax; background-color: steelblue; color: turquoise; background-image: linear-gradient( 45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%), linear-gradient( 45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%); background-position: 0 0, 5vmax 5vmax; background-size: 10vmax 10vmax;
平移背景圖案:
body::before { top: 50%; left: 50%; animation: 9s move infinite ease-in-out alternate; } @keyframes move { from { left: -40%; top: -40%; } to { left: -60%; top: -60%; } }
讓背景圖案轉起來:
body::before { animation: 9s move infinite ease-in-out alternate, 9s -1.5s rotating infinite ease-in-out alternate; } @keyframes rotating { to { transform: rotate(180deg); } }
平移頁面:
body { top: 50%; left: 50%; animation: 3s move infinite ease-in-out alternate; }
縮放頁面:
body { animation: 3s move infinite ease-in-out alternate, 3s zoom infinite ease-in-out alternate; } @keyframes zoom { to { transform: scale(10); } }
最後,增加變色效果:
@keyframes rotating { to { transform: rotate(180deg); filter: hue-rotate(1turn); } }
大功告成!
相關推薦:
以上是如何使用純CSS 實現一個沒有DOM元素的動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!