CSS是一種可以控制網(wǎng)頁樣式的語言，通過它，我們可以讓網(wǎng)頁中的元素做出各種各樣的特效，讓網(wǎng)頁更加美觀動(dòng)感。下面，我們來學(xué)習(xí)如何使用CSS讓div做矩形運(yùn)動(dòng)。

div {
width: 100px; //設(shè)置矩形的寬度
height: 50px; //設(shè)置矩形的高度
background-color: #ff0000; //設(shè)置矩形的顏色
position: absolute; //設(shè)置為絕對(duì)定位
top: 0; //設(shè)置矩形的初始位置為頁面頂部
left: 0; //設(shè)置矩形的初始位置為頁面左側(cè)
animation: move 2s linear infinite; //設(shè)置動(dòng)畫效果
}
@keyframes move{ //定義動(dòng)畫效果
0%{ //初始狀態(tài)
transform: translate(0, 0); //矩形不偏移
}
50%{ //中間狀態(tài)
transform: translate(200px, 0); //矩形偏移200px
}
100%{ //最終狀態(tài)
transform: translate(0, 0); //矩形回到初始位置
}
}

代碼中我們首先定義了一個(gè)div元素，并設(shè)置了它的寬度、高度、背景色以及初始位置等屬性。接著我們?cè)黾恿艘粋€(gè)簡(jiǎn)單的動(dòng)畫效果，實(shí)現(xiàn)了使矩形沿x軸運(yùn)動(dòng)的特效。其中，transform屬性可以實(shí)現(xiàn)移動(dòng)、旋轉(zhuǎn)等操作，而animation屬性則是開啟一個(gè)動(dòng)畫效果，它是由 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、 animation-direction和animation-fill-mode等屬性組成。

通過這個(gè)簡(jiǎn)單的例子，我們可以看出，CSS的動(dòng)畫效果可以讓網(wǎng)頁更加生動(dòng)、有趣，為我們的網(wǎng)頁設(shè)計(jì)提供了無窮的創(chuàng)意。