在CSS中,我們可以使用@keyframes
規(guī)則來創(chuàng)建動(dòng)畫,為了讓風(fēng)車動(dòng)起來,我們可以定義一個(gè)從0度到360度的旋轉(zhuǎn)動(dòng)畫,以下是一個(gè)簡(jiǎn)單的示例:
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .風(fēng)車 { width: 100px; height: 100px; background-image: url('風(fēng)車圖片.png'); animation: rotate 2s linear infinite; }
在這個(gè)示例中,我們創(chuàng)建了一個(gè)名為rotate
的動(dòng)畫,其中transform: rotate(0deg)
表示風(fēng)車在動(dòng)畫開始時(shí)處于0度位置,transform: rotate(360deg)
表示風(fēng)車在動(dòng)畫結(jié)束時(shí)完成一圈旋轉(zhuǎn),我們將這個(gè)動(dòng)畫應(yīng)用到.風(fēng)車
類上,設(shè)置動(dòng)畫持續(xù)時(shí)間為2秒,線性速度,并且設(shè)置為無限循環(huán)。
這只是一個(gè)簡(jiǎn)單的示例,你可以根據(jù)自己的需求進(jìn)行調(diào)整,你可以改變動(dòng)畫的持續(xù)時(shí)間、速度曲線或者添加其他動(dòng)畫效果,記得在HTML中創(chuàng)建一個(gè)帶有.風(fēng)車
類的元素來使用這個(gè)動(dòng)畫。