CSS是一種用于控制網頁樣式的語言，其中包含了很多有趣的動畫和效果。在這篇文章中，我們將介紹一些常見的CSS動畫和效果。

/* 使用CSS實現動畫 */
/* 1. transition過渡效果 */
/* 使用transition可以讓元素在狀態改變時平滑地過渡 */
.box {
background-color: red;
transition: background-color 1s;
}
.box:hover {
background-color: blue;
}
/* 2. transform動畫 */
/* 使用transform可以以更加自然的方式動態改變元素的形狀和位置 */
.box {
transform: scale(1);
transition: transform 1s;
}
.box:hover {
transform: scale(1.5);
}
/* 3. animation動畫 */
/* 使用animation可以創建更加復雜和有趣的動畫效果 */
.box {
animation: myanimation 1s infinite;
}
@keyframes myanimation {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
/* CSS實現效果 */
/* 1. 漸變背景色 */
/* 使用linear-gradient可以創建從一個顏色到另一個顏色的漸變 */
.box {
background: linear-gradient(red, blue);
}
/* 2. 陰影效果 */
/* 使用box-shadow可以創建元素的陰影效果 */
.box {
box-shadow: 5px 5px 5px grey;
}
/* 3. 邊框動畫 */
/* 使用border-image和animation可以創建一個有趣的邊框動畫 */
.box {
border: 5px solid transparent;
border-image: linear-gradient(to bottom, red, blue) 1 100%;
animation: borderanimation 2s infinite alternate;
}
@keyframes borderanimation {
0% {
border-image-slice: 1 0;
}
100% {
border-image-slice: 0 1;
}
}

以上就是一些常見的CSS動畫和效果的實現方法。有了這些技巧，你可以在設計網頁時創造出更加生動有趣的效果。