想要讓你的網站更加生動有趣，就需要使用一些CSS樣式小動畫。這些小動畫能夠吸引用戶的注意，讓用戶對你的網站印象更深刻。

下面我將介紹幾個使用CSS實現的小動畫效果。

/* 1、鼠標滑過圖片時放大縮小 */
img:hover {
transform: scale(1.2);
transition: transform .3s ease-in-out;
}
/* 2、文字逐字出現 */
h1 {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
h1 span {
animation: type .5s linear forwards;
}
@keyframes type {
from {
width: 0;
}
to {
width: 100%;
}
}
/* 3、圖片旋轉 */
.rotate {
transition: transform 0.5s ease-in-out;
}
.rotate:hover {
transform: rotate(360deg);
}
/* 4、背景顏色漸變 */
button {
background: #1abc9c;
color: #fff;
transition: background 0.5s ease-in-out;
}
button:hover {
background: #16a085;
}

以上就是幾個使用CSS實現的小動畫效果。當然，這只是冰山一角，CSS樣式小動畫的效果還有很多。在網頁制作過程中，可以根據需求靈活運用，讓你的網站更有吸引力。