在網頁設計中引入動態效果可以使網頁更具有吸引力和趣味性。其中，gif圖是一種較為常見的動畫效果。在CSS中，可以方便的插入gif圖并實現動態效果。

//CSS代碼
.gif{
background-image: url("example.gif");
animation: example 5s infinite;
}
@keyframe example{
0%{ transform: rotate(0deg);}
100%{ transform: rotate(360deg);}
}

首先，需要將gif圖引入到CSS中。在CSS樣式表中，可以使用background-image屬性將gif圖作為元素的背景圖像。在例子中，我們可以將gif圖放置在與CSS樣式表相同的目錄下，并將其命名為“example.gif”，然后在CSS中將該gif圖作為元素的背景圖像引入。

接下來，我們需要使用CSS中的動畫特效，為gif圖添加旋轉效果。在CSS中，可以使用@keyframes和animation屬性來實現動畫效果。在例子中，我們定義了一個名為“example”的關鍵幀。在0%時刻，元素處于原始位置，不做任何變化。在100%時刻，元素被旋轉了360度。將動畫用animation屬性綁定到元素上。在例子中，我們指定了5秒的動畫時間，并將動畫無限循環。

最后，在HTML中將CSS樣式應用于指定的元素即可實現插入gif圖的動態效果。在例子中，我們定義了一個類名為“.gif”的元素。在HTML中，可以使用div標簽或其他標簽將該類名的樣式綁定到該元素上。