css3让你的文字舞动起来（动态渐变+3/4圆弧）

动态渐变文字

1.舞动文字

u=3890009461,2809003455&fm=27&gp=0.jpg

舞动文字从表面来看，1要文字颜色有渐变效果2最好该渐变效果是动态变化的。其实归结到前端语言里（不是代码，还是汉语）就是一句话：文字透明+背景渐变+只覆盖文字+animation。

汉仪长宋简

css

span{
 font-size: 3em;
  color:transparent;
  background-image: -webkit-linear-gradient(left, red, green 40%,orange 75%, red 100%);
  -webkit-background-clip: text;
  background-size: 200% 100%;
  animation: vary 2s infinite ease-in-out;

}  
@keyframes vary{
  0%{background-position: 0;}
  100%{background-position: -100%;}
}

效果：

1506252795(1).png

这其实是会变的，由于截图没发现时动态变化。您可以亲自尝试一下。

图片.png

2.注意

color:transparent;
  background-image: -webkit-linear-gradient(left, red, green 40%,orange 75%, red 100%);
  -webkit-background-clip: text;

文字渐变靠着三行。将背景用渐变颜色取代，然后背景只覆盖文字内容，那么文字颜色设为透明后，就以背景颜色呈现。此时还没发动态变化。

  background-size: 200% 100%;
  animation: vary 2s infinite ease-in-out;
@keyframes vary{
  0%{background-position: 0;}
  100%{background-position: -100%;}
}

background-size: 200% 100%;是为了让背景有流动空间。然后设置animation动画，变化背景位置，此时看见的文字便是动态流动的。

3/4圆弧

1506253866(1).png

想必大家都会用css3绘制1/4远边框和1/2圆形边框，只要设置某侧的边框为none就行了，但是还用这样的方法绘制3/4圆框，那么就会出现模糊边界，不要着急，下面我们一起来看看怎么制作吧。
1/2圆弧

1506254507(1).png

div{
  height: 50px;
  width: 100px;
  border-radius:50px 50px 0 0;
  border: 2px solid #f24;
border-bottom: none;
}

按照此方案绘制3/4圆弧会出现这项的效果

1506254650(1).png

很明显存在模糊边界，而这不是我们想要的。

1.方案一

1506254771(1).png

圆中有圆。把黄色1/4圆边框设为：none或者边框颜色为#fff;并且黄色圆弧的层次要大于底部。z-index大。

.yellow{
        height: 49px;
        width: 49px;
        border-radius:49px 0px 0px 0;
        border:2px solid #ff0;
       border:none;
        position: relative;
        z-index: 2;
}
.red{
          height: 100px;
          width: 100px;
          border-radius:50%;
          border: 2px solid #f24;
          position: relative;
          top:-73px;
          z-index: 1;  
        }

2.方案2

1506255230(1).png

圆上套方。去掉边框，把方形的背景设置为#fff，z-index=2即可.

.yellow{
        height: 50px;
        width: 50px;
        background-color: #fff;
        position: relative;
        z-index: 2;
      }
     .red{
          height: 100px;
          width: 100px;
          border-radius:50%;
          border: 1px solid #f24;
          /*border-left: none;*/
          position: relative;
          top:-73px;
          z-index: 1;
        }

3.方案三
以上两种方案是间接设计出来的，比较麻烦。其实3/4圆弧可以用一句css就能解决，border-left:2px solid transparent; 绘出圆后，将一侧边框设置为透明即可搞定。是的，就是这么帅气。

1506325099(1).png

#cir{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 50%;
    border-left: 2px solid transparent;
    transform: rotate(45deg);
}

综上三种方案均可得到270度弧。可能有朋友会说方案三简洁明了，为什么还要大费周章弄其他方案。其实写本文的目的不在于实现就行，而在于百花齐放，多一条路也是不错的选择。

1506255522(1).png

欢迎各位朋友批评指正，多多交流。

u=2209999876,1496232965&fm=27&gp=0.jpg