[前端小案例]-HTML+CSS旋轉(zhuǎn)風(fēng)車-源碼
2023-02-22 16:59 作者:是杰瑞-RayUang | 我要投稿
效果

制作原理
使用一個大盒子存放風(fēng)車,大盒子中放置四個等分的小盒子;
設(shè)置小盒子邊框為小盒子寬高的一半,并設(shè)置顏色,用來模擬風(fēng)車的四個葉片;
最后使用?@keyframes?規(guī)則創(chuàng)建動畫使大盒子旋轉(zhuǎn)。

源碼
HTML
css
使用一個大盒子存放風(fēng)車,大盒子中放置四個等分的小盒子;
設(shè)置小盒子邊框為小盒子寬高的一半,并設(shè)置顏色,用來模擬風(fēng)車的四個葉片;
最后使用?@keyframes?規(guī)則創(chuàng)建動畫使大盒子旋轉(zhuǎn)。
HTML