相信接觸過CSS3的小伙伴對(duì)它的動(dòng)畫屬性以及基本規(guī)則應(yīng)該有一定了解,今天來給大家分享一個(gè)小案例室抽,如圖所示:
簡單描述一下這個(gè)效果:使用div元素創(chuàng)立一個(gè)邊長為30px的等邊三角形(尖朝上)搪哪, 讓該等邊三角形以5秒為周期重復(fù)的沿著邊長為200px的正方形做順時(shí)針運(yùn)動(dòng), 起始顏色為紅色坪圾,到右上角時(shí)平滑的漸變?yōu)辄S色晓折,到右下角時(shí)漸變?yōu)樗{(lán)色惑朦, 到左下角時(shí)漸變?yōu)榫G色;請兼容Firefox漓概、Safari漾月、Chrome、Opera瀏覽器胃珍。想學(xué)習(xí)更多案例效果的小伙伴可以加我Q群:142991222梁肿,一起探索更多前端干貨。
話不多說堂鲜,上代碼:
HTML代碼:
CSS代碼:
如此一來栈雳,動(dòng)態(tài)轉(zhuǎn)圈圈三角形就實(shí)現(xiàn)了,主要是keyframes規(guī)則和animation的使用缔莲。