Gradient 渐变

背景颜色

本框架一共定义了7种渐变色8种渐变角度。两种颜色进行过度渐变,第一种为原色,第二种颜色为原色转换色轮50度的颜色。ax-gradient-0等同于ax-gradient-360,默认ax-gradient角度是45deg。基本结构如下:

                            <div class="ax-bg-primary ax-gradient">文字</div>
                            <div class="ax-bg-primary ax-gradient-0">文字</div>
                            <div class="ax-bg-primary ax-gradient-45">文字</div>
                            <div class="ax-bg-primary ax-gradient-90">文字</div>
                            <div class="ax-bg-primary ax-gradient-135">文字</div>
                            <div class="ax-bg-primary ax-gradient-180">文字</div>
                            <div class="ax-bg-primary ax-gradient-225">文字</div>
                            <div class="ax-bg-primary ax-gradient-270">文字</div>
                            <div class="ax-bg-primary ax-gradient-315">文字</div>
                            <div class="ax-bg-primary ax-gradient-360">文字</div>
                         
  • default
  • 0
  • 45deg
  • 90deg
  • 135deg
  • 180deg
  • 225deg
  • 270deg
  • 315deg
  • 360deg
  • default
  • 0
  • 45deg
  • 90deg
  • 135deg
  • 180deg
  • 225deg
  • 270deg
  • 315deg
  • 360deg
  • default
  • 0
  • 45deg
  • 90deg
  • 135deg
  • 180deg
  • 225deg
  • 270deg
  • 315deg
  • 360deg
  • default
  • 0
  • 45deg
  • 90deg
  • 135deg
  • 180deg
  • 225deg
  • 270deg
  • 315deg
  • 360deg
  • default
  • 0
  • 45deg
  • 90deg
  • 135deg
  • 180deg
  • 225deg
  • 270deg
  • 315deg
  • 360deg
  • default
  • 0
  • 45deg
  • 90deg
  • 135deg
  • 180deg
  • 225deg
  • 270deg
  • 315deg
  • 360deg
  • default
  • 0
  • 45deg
  • 90deg
  • 135deg
  • 180deg
  • 225deg
  • 270deg
  • 315deg
  • 360deg

渐变动画

对渐变背景使用ax-rotate可滚动色环。基本结构如下:

                            <div class="ax-bg-primary ax-gradient ax-rotate">文字</div>