在網頁設計中，動畫效果的運用能夠增強頁面的交互性和視覺效果。其中，CSS動畫是一種非常流行的動畫效果。其中，放大和縮小效果是比較常用的效果之一。

下面是一個簡單的示例，實現了一個圖片的放大和縮小效果：

img{
transition: all .5s ease-in-out;
}
img:hover{
transform: scale(1.2);
}

在上述代碼中，transition屬性是指定動畫轉換的過渡效果，這里的效果是所有屬性變化過程都帶有0.5秒的動畫效果，并且是緩慢進入緩慢退出。當鼠標懸停在圖片上時，圖片的transform屬性變化，scale(1.2)指定了圖片的放大倍數是1.2。

除了使用hover偽類實現動畫效果外，我們也可以使用JavaScript控制CSS樣式的變化。下面是一個使用JavaScript和CSS實現放大和縮小效果的示例：

// HTML代碼// JavaScript代碼
var myImg = document.getElementById("myImg");
myImg.className = "normal";
myImg.onclick = function() {
if (myImg.className === "normal") {
myImg.className = "bigger";
} else {
myImg.className = "normal";
}
}

/*CSS代碼*/
.normal {
height: 100px;
width: 100px;
transition: all 1s ease-in-out;
}
.bigger {
height: 200px;
width: 200px;
}

在這個示例中，我們首先定義了兩個class，normal和bigger。normal表示普通狀態，bigger表示圖片變大狀態。normal狀態下，圖片的高和寬都是100px，并且所有屬性變化過程都帶有1秒的動畫效果，并且是緩慢進入緩慢退出。當點擊圖片時，通過JavaScript控制class的切換實現了圖片的放大和縮小效果。

總之，放大和縮小效果是一種簡單而又實用的動畫效果，我們可以通過CSS或者JavaScript來實現。希望本文能夠對你有所幫助。