在網頁設計過程中，CSS動畫已經成為了一種很流行的裝飾手段。隨著瀏覽器的發展，CSS動畫的應用也越來越廣泛。作為一種技術，CSS動畫既可以用來增強網頁的交錯性，也可以用來制作一些有趣、有意思的特效。

/* 跑步人動畫 */
.running-man {
position: relative;
left: 0;
top: 0;
animation: running 1s infinite linear; 
}
@keyframes running {
0% {
left: 0%;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}

其中，.running-man 是這個元素的類名， animation 屬性用來給這個元素添加動畫， running 則是動畫的名字。這段代碼的作用是讓這個“跑步人”在一個盒子里來回跑步，通過修改 left 屬性值的方式讓圖片動起來。

/* 簡單的旋轉動畫 */
.rotate {
animation: rotate 1s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

這段代碼則是制作一個簡單的旋轉動畫。通過 transform 屬性中的 rotate() 函數，在不改變元素在文檔流中位置的前提下，實現元素的旋轉。這樣可以給網頁增加一些有趣的元素，增強其視覺效果。

除了上面這些例子，實際上 CSS 動畫能夠實現的效果非常豐富多彩，可以讓網頁呈現出各種不同的特效。而在這個過程中，pre 標簽則是一種很好的代碼展示方式，可以讓代碼更易于閱讀、理解。希望大家能夠通過上述代碼，嘗試制作一些有趣、富有創意的 CSS 動畫，讓自己的網頁更加精彩！