转圈圈的三角形

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

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

话不多说,上代码:

HTML代码:

CSS代码:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,663评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,344评论 0 11
  • 原文https://developer.apple.com/documentation/metal/hello_t...
    williamxiewz阅读 1,574评论 3 4
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,072评论 0 66