如何使用純CSS 實現一個沒有DOM元素的動畫效果

本篇文章給大家帶來的內容是關於如何使用純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);    }}

大功告成！