CSS3霓虹灯文字特效

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS3霓虹灯文字特效</title><meta name="keywords" content="canvas动画, 手机微信网站特效, css3动画, html5特效, 网页特效" /><style type="text/css">.text-effect {overflow: hidden;position: relative;-webkit-filter: contrast(110%) brightness(190%);filter: contrast(110%) brightness(190%);}.neon {position: relative;background: black;color: transparent;}.neon::before, .neon::after {content: attr(data-text);color: white;-webkit-filter: blur(0.02em);filter: blur(0.02em);position: absolute;top: 0;left: 0;pointer-events: none;}.neon::after {mix-blend-mode: difference;}.gradient,.spotlight {position: absolute;top: 0;left: 0;bottom: 0;right: 0;pointer-events: none;z-index: 10;}.gradient {background: -webkit-linear-gradient(45deg, red, blue);background: linear-gradient(45deg, red, blue);mix-blend-mode: multiply;}.spotlight {-webkit-animation: light 5s infinite linear;animation: light 5s infinite linear;background: -webkit-radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, -webkit-radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;background: radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;top: -100%;left: -100%;mix-blend-mode: color-dodge;}@-webkit-keyframes light {100% {-webkit-transform: translate3d(50%, 50%, 0);transform: translate3d(50%, 50%, 0);}}@keyframes light {100% {-webkit-transform: translate3d(50%, 50%, 0);transform: translate3d(50%, 50%, 0);}}.neon {font: 700 100px 'Lato', sans-serif;text-transform: uppercase;text-align: center;margin: 0;}.neon:focus {outline: none;border: 1px dotted white;}body {background: black;display: -webkit-box;display: -ms-flexbox;display: flex;min-height: 100vh;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}</style></head><body><div class="text-effect"><h1 class="neon" data-text="SHUWON" contenteditable>SHUWON</h1><div class="gradient"></div><div class="spotlight"></div></div></body>
</html>

CSS3霓虹灯文字特效相关推荐

css 霓虹灯转动效果,CSS3霓虹灯文字动画特效
这是一个完全由CSS3实现的霓虹灯文字动画特效,虽然看起来有flash的质感和js驱动的错觉,但事实上你可以看到所有代码如下:html> CSS3霓虹灯文字特效 .text-effect { o ...
css3霓虹灯文字效果以及文字背景动画
一.注意点 1.HTML5中rel属性的prefetch预加载功能 :rel='stylesheet prefetch' 2.Google字体库载入(在family加入你要的字体) <link ...
html5 火焰效果图,css3火焰文字特效
这是一款效果非常炫酷的css3火焰文字特效.该css3火焰文字特效仅用10行代码就可以实现,效果特别炫酷. 使用方法 HTML结构使用任意元素来包裹要实现火焰文字特效的文字. jQuery之家 CS ...
jQuery绚丽霓虹灯文字特效
novacancy.js是一款非常有意思的.效果绚丽的jQuery绚丽霓虹灯文字特效插件.该文字特效插件可以将任意文本转换为霓虹灯效果,你可以设置灯光的颜色,发光的颜色,几个文字是不亮灯状态,以及灯光 ...
PS教程：Photoshop制作霓虹灯文字特效
1制作霓虹灯效果回顶部 [PConline 教程]在本次PS教程介绍利用对Photoshop制作霓虹灯文字特效.本PS教程属于基础教程,适合初学者! 先看效果图图0 1.选择"文件/新建& ...
html霓虹灯文字效果,jQuery绚丽霓虹灯文字特效插件
novacancy.js是一款非常有意思的.效果绚丽的jQuery绚丽霓虹灯文字特效插件.该文字特效插件可以将任意文本转换为霓虹灯效果,你可以设置灯光的颜色,发光的颜色,几个文字是不亮灯状态,以及灯光 ...
html霓虹灯效果图,HTML5 SVG+CSS3霓虹灯文字边框动画特效
[实例简介] [实例截图] [核心代码] 使用SVG CSS实现动态霓虹灯文字效果 #svgBox{[/b] width:100%; margin:100px auto; } .text{ font- ...
CSS3制作文字特效
今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助.废话不说,直接进入效果的制作,感兴趣的同学跟着我的代 ...
超简单的魔幻霓虹灯文字特效 html+css
话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~ 这个效果很简单看一分钟就明白了~ 初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3 ...

CSS3霓虹灯文字特效

CSS3霓虹灯文字特效相关推荐

最新文章

热门文章