转圈圈的三角形

相信接触过CSS3的小伙伴对它的动画属性以及基本规则应该有一定了解，今天来给大家分享一个小案例，如图所示：

简单描述一下这个效果：使用div元素创立一个边长为30px的等边三角形（尖朝上）， 让该等边三角形以5秒为周期重复的沿着边长为200px的正方形做顺时针运动， 起始颜色为红色，到右上角时平滑的渐变为黄色，到右下角时渐变为蓝色， 到左下角时渐变为绿色；请兼容Firefox、Safari、Chrome、Opera浏览器。想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。

话不多说，上代码：

HTML代码：

CSS代码：

如此一来，动态转圈圈三角形就实现了，主要是keyframes规则和animation的使用。