SVG霓虹灯效果

2018-06-24 01:49:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

地铁上逛segmentfault看到一篇用纯css和SVG来实现的很赞的效果,觉得拿来做一些开场效果动画应该不错。

原文地址:https://segmentfault.com/a/1190000010963326

觉得很有趣,正好925快到了,就撸了一个生日快乐的

效果图如下:

 

就像是一圈圈蚂蚁在它身上爬。。。。。emmmmm奇特的比喻

fill:none;可以让图形不被填充,如果不添加这一属性,则默认填充颜色是black,这个效果

发现stroke这一系列属性都很有意思啊,填充啊透明度和stroke-linecap,但是这个效果用的最多的还是stroke-dasharray和stroke-dashoffset。

借鉴解释:http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

  • stroke-miterlimit 表示描边相交(锐角)的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思,值越大,损耗越小。具体干嘛的,我自己也不确定。大家可查查其他资料。
  • stroke-dasharray 表示虚线描边。可选值为:none<dasharray>inherit. 其中,none表示不是虚线;<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。
  • stroke-dashoffset 表示虚线的起始偏移。可选值为:<percentage><length>inherit. 百分比值,长度值,继承。
  • stroke-opacity 表示描边透明度。默认是1.

特别佩服作者列举的一个生动形象的例子:

一根火腿肠12厘米,要在上面画虚线,虚线间隔有15厘米,如果没有dashoffset,则火腿肠前面15厘米会被辣椒酱覆盖!实际上只有12厘米,因此,我们看到的是整个火腿肠都有辣椒酱。现在,dashoffset也是15厘米,也就是虚线要往后偏移15厘米,结果,辣椒酱要抹在火腿肠之外,也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG,也就是直线看不见了。我们把dashoffset值逐渐变小,则会发现,火腿肠上的辣椒酱一点一点出现了,好像辣椒酱从火腿肠根部涂抹上去一样。

 

<style type="text/css">
body{
background-color: #00688B;
}
.text{
font-size: 64px;
font-weight: normal;
text-transform: uppercase;

fill:none;
stroke: #B0E0E6;
stroke-width: 2px;
/stroke-dasharray: 90 310;


animation: stroke 6s infinite linear;
}

.text-1{
stroke: #FFEC8B;
animation-delay:-1.5s;
text-shadow:5px 5px 5px #FFEC8B;
}
.text-2{
stroke:#AEEEEE;
animation-delay:-3s;
text-shadow:5px 5px 5px #7FFFD4;
}
.text-3{
stroke:#EEE0E5;
animation-delay:-4.5s;
text-shadow:5px 5px 5px #7FFFD4;
}
.text-4{
stroke:#FFC1C1;
animation-delay:-6s;
text-shadow:5px 5px 5px #7FFFD4;
}
@keyframes stroke {
to {
stroke-dashoffset: -400;
}
}

</style>

<svg width="100%" height="100">
<text text-anchor="middle" x="50%" y="50%" class="text text-1" >
Happy birthday to you?
</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2" >
Happy birthday to you?
</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3" >
Happy birthday to you?
</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4" >
Happy birthday to you?
</text>
</svg>

 

只需要用到svg里面的描边(stroke)和填充(fill)就可以达成。数值各种花样调试有惊喜!??ヽ(°▽°)ノ?

放上一些SVG基础知识的链接以供大家参考:http://www.w3cplus.com/svg/svg-fill-stroke.html

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:web常见几种处理图标方法

下一篇:HTML配色工具!在线配色工具