動態漸變文字

1.舞動文字

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

舞動文字從表面來看，1要文字顏色有漸變效果2最好該漸變效果是動態變化的。其實歸結到前端語言里（不是代碼，還是漢語）就是一句話：文字透明+背景漸變+只覆蓋文字+animation。

<span>漢儀長宋簡</span>

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

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