svg css实现霓虹灯

svg css文字霓虹灯

事情是酱紫的，因为两会马上来了，公司产品要搞免费试用活动。首页要求醒目抓眼，UI小姐姐废了九牛九虎之力让产品同意了一版霓虹灯效果图，要在首页中的部分文字大量使用霓虹效果。UI小姐姐给了gif图，但是测试中有拉伸和各种分别率问题，效果并不好，于是就有了这篇文章，用我们的大CSS来完成这个任务。
首先，要知道svg中有个重要的属性–stroke，翻译过来意为“描边”，这就是能完成霓虹效果的最重要角色。stroke有以下几种属性设置：

stroke-width //描边粗细
stroke-linecap //描边端点的表现方式 可用值有 butt round square inherit
stroke-linejoin //描边转角的表现方式 可用值有 miter round bevel inherit
stroke-miterlimit //描边相交（锐角）的表现方式
stroke-dasharray //虚线描边 可用值 none dasharray inherit
stroke-dashoffset //虚线的起始偏移 可用值 percentage length inherit
stroke-opacity //透明度

内联SVG的强大之处在于，其本身也是个HTML元素，能被CSS属性控制，处理传统的高宽定位、边框背景色等，SVG自身的一些特殊属性也能被CSS支持，甚至在CSS3 animation动画中，因为有这些特性，接下来我们就可以实现一个简单的霓虹效果

<svg width="100%" height="100"><text text-anchor="middle" x="50%" y="50%" class="welcome">欢迎试用</text>
</svg>

.welcome{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;}
}

然后根据可以根据需求调整颜色和动画时间：

<svg width="100%" height="100"><text text-anchor="middle" x="50%" y="50%" class="welcome welcome-1">欢迎试用</text><text text-anchor="middle" x="50%" y="50%" class="welcome welcome-2">欢迎试用</text><text text-anchor="middle" x="50%" y="50%" class="welcome welcome-3">欢迎试用</text><text text-anchor="middle" x="50%" y="50%" class="welcome welcome-4">欢迎试用</text>
</svg>

.welcome-1{stroke: #3498db;text-shadow: 0 0 5px #3498db;animation-delay: -1.5s;
}
.welcome-2{stroke: #f39c12;text-shadow: 0 0 5px #f39c12;animation-delay: -3s;
}
.welcome-3{stroke: #e74c3c;text-shadow: 0 0 5px #e74c3c;animation-delay: -4.5s;
}
.welcome-4{stroke: #9b59b6;text-shadow: 0 0 5px #9b59b6;animation-delay: -6s;
}

效果如下图

svg css实现霓虹灯相关推荐

[css] 使用css实现霓虹灯效果
[css] 使用css实现霓虹灯效果 <div class="neon">Good evening, and good night!</div>body { ...
如何借助SVG+CSS用2个小时撸完一个网易云音乐的动效海报（可控制速度）
因为平时也关注网易UEDC的订阅号,前几天就看到了这么一个动效,主题是<网易云音乐2018年度听歌报告>,内容是一个人在努力蹬车因为构图简单,创意又不错,所以就试了下用SVG+CSS动画实 ...
jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm
css 霓虹灯转动效果,使用SVG + CSS实现动态霓虹灯文字效果
早上无意间进入一个网站,看到他们的LOGO效果略屌,如图: 刚开始以为是gif动画之类的,审查元素发现居然是用SVG + CSS3动画实现的,顿时激起了我的(hao)欲(qi)望(xin),决定要一探 ...
SVG/CSS路径动画
<template><div class="title">路径动画</div><div class="icon-box2&quo ...
CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画
作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始. 微信公众号:AlbertYang 今天教大家使用CS ...
【译】来，用 SVG CSS 给你画一朵真实的云
原文:Drawing Realistic Clouds with SVG and CSS 这是作者最终实现的效果: ......哦,不,应该是这张: 在线查看效果:cloud demo 正文开始啦- ...
css实现霓虹灯特效字体
在开始之前先了解外部字体的引入: vite中字体的引入方法(.otf字体等)如下: 1.在src下的assets文件夹下创建font文件夹,将下载好的字体包放到该文件夹下 2.在font文件夹下创建f ...
html霓虹灯效果图,HTML5 SVG+CSS3霓虹灯文字边框动画特效
[实例简介] [实例截图] [核心代码] 使用SVG CSS实现动态霓虹灯文字效果 #svgBox{[/b] width:100%; margin:100px auto; } .text{ font- ...

svg css实现霓虹灯

svg css文字霓虹灯

svg css实现霓虹灯相关推荐

最新文章

热门文章