MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » SVG霓虹灯成效

SVG霓虹灯成效

www.MyException.Cn  网友分享于:2013-09-28  浏览:0次
SVG霓虹灯效果

地铁上逛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

 

文章评论

当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
代码女神横空出世
代码女神横空出世
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
老程序员的下场
老程序员的下场
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
我的丈夫是个程序员
我的丈夫是个程序员
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
我是如何打败拖延症的
我是如何打败拖延症的
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
鲜为人知的编程真相
鲜为人知的编程真相
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员都该阅读的书
程序员都该阅读的书
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
中美印日四国程序员比较
中美印日四国程序员比较
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
如何成为一名黑客
如何成为一名黑客
每天工作4小时的程序员
每天工作4小时的程序员
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
 程序员的样子
程序员的样子
那些争议最大的编程观点
那些争议最大的编程观点
程序员的鄙视链
程序员的鄙视链
程序员必看的十大电影
程序员必看的十大电影
为什么程序员都是夜猫子
为什么程序员都是夜猫子
旅行,写作,编程
旅行,写作,编程
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Java程序员必看电影
Java程序员必看电影
程序员和编码员之间的区别
程序员和编码员之间的区别
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
10个调试和排错的小建议
10个调试和排错的小建议
一个程序员的时间管理
一个程序员的时间管理
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
编程语言是女人
编程语言是女人
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有