CSS設(shè)置移動效果：

移動是網(wǎng)頁設(shè)計(jì)常用的動畫效果之一，可以讓頁面更生動且吸引人的注意力。下面將會介紹一些CSS屬性可以輕松實(shí)現(xiàn)移動效果。

1. translate

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

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

2. transition

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

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

3. animation

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

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

總結(jié)

以上就是CSS設(shè)置移動效果的方式，通過transform屬性、transition屬性和animation屬性分別控制元素的移動動畫，讓網(wǎng)頁設(shè)計(jì)更加生動，增加用戶體驗(yàn)。