动态渐变文字
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
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
