在網頁設計中，小動畫素材是非常重要的一部分。它們可以讓網頁更具生動性和互動性，吸引用戶的眼球和注意力。CSS提供了多種方式來實現小動畫，下面介紹一些常見的CSS小動畫素材。

/* 1. 旋轉動畫 */
.spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* 2. 彈出動畫 */
.pop {
animation: pop 0.3s ease-in-out;
}
@keyframes pop {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* 3. 閃爍動畫 */
.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

以上實例代碼分別實現了旋轉、彈出、和閃爍動畫。其中animation屬性指定動畫名稱、時間、速度曲線和是否循環。@keyframes定義動畫的關鍵幀，即在某個時間點上的樣式。通過使用animation和@keyframes屬性，可以輕松實現各種小動畫效果。

當然，小動畫不應當過度使用，否則會降低網頁的性能和用戶體驗。適當地使用一些互動元素可以突出網頁的特色和吸引力。希望以上小動畫素材能夠為你的網頁設計帶來靈感和幫助。