CSS是前端開發過程中不可或缺的重要技能，其中最常用的就是制作圖片和動畫效果。在這里，我們將介紹一些常用的CSS代碼，幫助您快速實現所需要的效果。

制作圖片效果通常需要使用CSS的“background-image”屬性，加載背景圖像的同時還可以添加其他屬性，比如“background-repeat”、“background-size”、“background-position”等。下面是一個例子：

div {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

除了圖片，CSS還可以制作動畫效果，其中最流行的是“transition”和“animation”屬性。這兩個屬性可以幫助您實現流暢的動畫效果，提升用戶交互體驗。下面是一個例子：

button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: #333;
}

在上面的例子中，我們在按鈕上添加了“transition”屬性，當鼠標懸停在按鈕上時，背景顏色會以0.3秒的緩動效果變為深灰色。

另一種添加動畫效果的方法是使用“animation”屬性。該屬性有兩種常用的用法：使用關鍵幀動畫或永久動畫。下面是一個例子：

@keyframes example {
0% { opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
div {
animation-name: example;
animation-duration: 3s;
}

在上面的例子中，我們定義了一個名為“example”的關鍵幀動畫，該動畫將在3秒內改變DIV元素的不透明度，從不透明度為0變為不透明度為1。

綜上，CSS提供了豐富的工具，可以幫助我們制作炫酷的圖片以及動畫效果。通過學習和使用上述技巧，您可以更好地展示自己的作品，提升用戶體驗。