相信接触过CSS3的小伙伴对它的动画属性以及基本规则应该有一定了解,今天来给大家分享一个小案例,如图所示:
简单描述一下这个效果:使用div元素创立一个边长为30px的等边三角形(尖朝上), 让该等边三角形以5秒为周期重复的沿着边长为200px的正方形做顺时针运动, 起始颜色为红色,到右上角时平滑的渐变为黄色,到右下角时渐变为蓝色, 到左下角时渐变为绿色;请兼容Firefox、Safari、Chrome、Opera浏览器。想学习更多案例效果的小伙伴可以加我Q群:142991222,一起探索更多前端干货。
话不多说,上代码:
HTML代码:
CSS代码:
如此一来,动态转圈圈三角形就实现了,主要是keyframes规则和animation的使用。