CSS設置移動效果：

移動是網頁設計常用的動畫效果之一，可以讓頁面更生動且吸引人的注意力。下面將會介紹一些CSS屬性可以輕松實現移動效果。

1. translate

translate屬性是一種基于元素當前位置進行移動的方法，可以沿著水平、垂直或者斜線方向移動。例如，下面的代碼將會使元素水平向右移動50像素，垂直向下移動50像素，同時不改變元素的尺寸和形狀：

.move {
transform: translate(50px, 50px);
}

2. transition

transition屬性可以控制某個元素的動畫過渡效果，可以通過指定屬性的變化動畫形式和持續時間來設置。下面的代碼將會使一個元素在hover的時候產生一個緩慢移動的效果：

.move {
transition: transform 0.3s ease-in-out;
}
.move:hover {
transform: translate(50px, 50px);
}

3. animation

animation屬性可以讓元素呈現循環播放的動畫，可以控制播放效果的時間，以及動畫的形式等等。下面的代碼將會產生一個無限循環的元素移動效果：

.move {
animation: moving 2s infinite;
}
@keyframes moving {
0% {
transform: translate(0);
}
50% {
transform: translate(50px, 50px);
}
100% {
transform: translate(0);
}
}

總結

以上就是CSS設置移動效果的方式，通過transform屬性、transition屬性和animation屬性分別控制元素的移動動畫，讓網頁設計更加生動，增加用戶體驗。