CSS方塊飄動(dòng)效果是一種常見(jiàn)的網(wǎng)頁(yè)視覺(jué)效果，能夠提升網(wǎng)頁(yè)的視覺(jué)吸引力。這種效果可以通過(guò)CSS中的“transform”屬性來(lái)實(shí)現(xiàn)。下面是一個(gè)例子：

.box{
　　width: 50px;
　　height: 50px;
　　background: #3cb371;
　　position: absolute;
　　animation: float 3s infinite linear;
}
@keyframes float{
　　0% { transform: translate(0, 0); }
　　50% { transform: translate(15px, 15px); }
　　100% { transform: translate(0, 0); }
}

以上代碼定義了一個(gè)class為“box”的元素，在動(dòng)畫(huà)中會(huì)不斷左右和上下移動(dòng)。關(guān)鍵在于“animation”屬性，它指定了元素的動(dòng)畫(huà)效果，其中“float”是動(dòng)畫(huà)名稱，“3s”是動(dòng)畫(huà)持續(xù)時(shí)間，“infinite”是動(dòng)畫(huà)循環(huán)次數(shù)，“l(fā)inear”是動(dòng)畫(huà)速度曲線。

而“transform”屬性則是讓元素進(jìn)行旋轉(zhuǎn)、縮放、偏移等變換，這里用的是“translate()”函數(shù)，它可以移動(dòng)元素到指定的坐標(biāo)軸位置。%