使用SVG + CSS实现动态霓虹灯文字效果

效果图:

原理:多个SVG描边动画使用不同的animation-delay即可!

对于一个形状SVG元素或文本SVG元素,可以使用stroke-dasharray来控制描边的间隔样式,并且可以用stroke-dashoffset来控制描边的偏移量,借此可以实现描边动画效果,更具体的资料可以看看张大神的《纯CSS实现帅气的SVG路径描边动画效果

我们先实现一个简单的文字描边动画:

<svg width="100%" height="100">
    <text text-anchor="middle" x="50%" y="50%" class="text">
        segmentfault.com
    </text>
</svg> 
.text{
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke: #3498db;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

演示地址:http://output.jsbin.com/demic...

然后我们同时使用多个描边动画,并设置不同的animation-delay:

<svg width="100%" height="100">
    <text text-anchor="middle" x="50%" y="50%" class="text text-1">
        segmentfault.com
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-2">
        segmentfault.com
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-3">
        segmentfault.com
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-4">
        segmentfault.com
    </text>
</svg> 

注意:要使用多少种颜色,就放多少个text

.text{
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
}
.text-1{
    stroke: #3498db;
    text-shadow: 0 0 5px #3498db;
    animation-delay: -1.5s;
}
.text-2{
    stroke: #f39c12;
    text-shadow: 0 0 5px #f39c12;
    animation-delay: -3s;
}
.text-3{
    stroke: #e74c3c;
    text-shadow: 0 0 5px #e74c3c;
    animation-delay: -4.5s;
}
.text-4{
    stroke: #9b59b6;
    text-shadow: 0 0 5px #9b59b6;
    animation-delay: -6s;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

大功告成,演示地址:http://output.jsbin.com/vuyuv...

需要注意的几个点:

  1. 各个元素的animation-delay与animation的总时长的设置要协调
  2. stroke-dashoffset与stroke-dasharray的设置要协调

转自:https://segmentfault.com/a/1190000010963326

时间: 2024-10-08 21:46:37

使用SVG + CSS实现动态霓虹灯文字效果的相关文章

CSS立体文字效果最佳实践

上一篇的<纯CSS3文字效果推荐>文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯! 案例效果还是在codepen,在线研究点这里,下载收藏点这里. 1.单单纯纯的效果一 为了简化操作,我们使用和上一篇文章<纯CSS3文字效果推荐>一样的文档结构,后面的效果大差小不差,也就不再列出. <div contenteditable

css实现漂亮的文字滑动折叠效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

精通CSS+DIV网页样式与布局--CSS文字效果

上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定的往下走,今天这篇博文,小编主要简单总结一下CSS的文字效果,首先,我们来看一张图: 接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例. 文字的字体 在CSS中,我们采用了font-family来控制文字的字体,接着,我们来看一

css鼠标滑过出现文字效果

模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&qu

CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现

前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class="blur"/> <div class="text-gradient ">天赐神功</div> <div class="border"></div> </div> 上面一看第一个图片i

HTML5 SVG简单的动态绘制轮廓线条动画插件

walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件.它支持SVG的path,line 和 polyline元素.walkway使用起来简单方便,可以制作出非常酷的SVG线条动态绘制效果.更好的动态绘制线条插件可以参考:html5 svg线条动态绘制文字轮廓边框动画.HTML5 SVG图形轮廓线条绘制动画插件-vivus 和 html5 svg线条动态绘制iphone边框动画效果. 在线演示:http://www.htmleaf.com/Demo/201501261282.h

CSS之图片压盖效果案例分析

CSS之图片压盖效果案例分析 最近在做某个网站的静态页面,发现有很多图片压盖效果的布局,特来记录一下布局技巧. 碰到这种布局你会怎么做: 第一反应肯定是浮动,没错,可以把这几个图片放在ul列表的li标签里,给每个li标签内添加img和文字.如: <ul> <li> <img src="" alt=""><p>文字</p></li> <li><img src="&quo

css如何实现一个文字两种颜色代码实例

css如何实现一个文字两种颜色代码实例:在实际应用中可能需要设置文本效果比较炫酷.有一种效果就是将一个文字设置为两种颜色,使用普通的方法肯定是无法实现.下面就分享一下实现此功能的代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

css如何实现让文字沉到元素的底部

css如何实现让文字沉到元素的底部:在实际应用中可能有这样的需求,那就是将指定的文本沉降到元素的底部.下面就通过代码实例介绍以下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <ti