CSS3霓虹灯文字特效
2017-11-22 14:16
197 查看
<!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+HTML5特效5 - 震动的文字
- 纯css3实现的文字亮光特效
- css3鼠标滑过图片文字动画特效
- CSS3火焰文字特效制作教程
- 分享十个CSS3鼠标滑过文字动画特效
- 基于css3的文字3D翻转特效
- jQuery绚丽霓虹灯文字特效
- 【CSS3】纯css3悬停文字线条边框动画特效
- CSS3+HTML5特效6 - 闪烁的文字
- 纯css3实现的文字亮光特效
- 纯css3特效实现的文字亮光
- [HTML5&CSS3]纯css3实现的文字亮光特效
- 盘点5个典型的CSS3文字特效
- 文字 AnimatedOpeningType css3的文字3D翻转特效
- CSS3实现水位充满文字特效
- 面试题1.闭合标签有哪些??CSS3中阴影,文字增加特效,渐变,旋转,缩放
- CSS3火焰文字特效制作教程
- CSS自学笔记(12):CSS3文字特效
- [转]常用的CSS3文字特效
- 【迟早得学】CSS3特效之文字阴影:text