在網(wǎng)頁設(shè)計(jì)中，動(dòng)畫效果是非常重要的。CSS和JS可以通過代碼來實(shí)現(xiàn)讓網(wǎng)頁元素飄動(dòng)的動(dòng)畫效果。下面就來詳細(xì)介紹一下CSS和JS實(shí)現(xiàn)飄動(dòng)動(dòng)畫的方法。

/* CSS實(shí)現(xiàn)飄動(dòng)動(dòng)畫 */
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
#myanimation {
position: relative;
animation-name:mymove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

以上代碼是使用CSS實(shí)現(xiàn)飄動(dòng)動(dòng)畫的方法。通過定義一個(gè)名為mymove的動(dòng)畫，在關(guān)鍵幀(from和to)中設(shè)置元素的top值，從而實(shí)現(xiàn)飄動(dòng)的效果。需要注意的是，需要給元素添加position:relative屬性，才能讓它移動(dòng)。

// JS實(shí)現(xiàn)飄動(dòng)動(dòng)畫
var elem = document.getElementById("myanimation"); 
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++; 
elem.style.top = pos + "px"; 
elem.style.left = pos + "px"; 
}
}

以上代碼是使用JS實(shí)現(xiàn)飄動(dòng)動(dòng)畫的方法。JS利用setInterval函數(shù)來反復(fù)調(diào)用frame函數(shù)，從而實(shí)現(xiàn)循環(huán)動(dòng)畫。在frame函數(shù)中，通過改變元素的top和left屬性來實(shí)現(xiàn)飄動(dòng)效果。需要注意的是，需要先獲取元素對象，才能對它進(jìn)行操作。