可以自定义文本的霓虹灯特效

Neon with CSS3 animation 在输入框中输入字符串，霓虹文本将随之动态改变。

angular.js, 文本特效

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2139
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Nixie+One);
@import url(https://fonts.googleapis.com/css?family=Monoton);
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
body {
    animation: bgNeon2 3s infinite;
}
.bg {
    background-image: url(http://www.brightlikeneon.com/wp-content/themes/codium-extend/images/bg.jpg);
    width: 100%;
    height: 100%;
    background-position: center;
    opacity: .3;
}
.input-text {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 280px;
    padding: 5px 20px;
    border: none;
    background-color: rgba(0, 0, 0, .4);
    color: #E91E63;
    font-family: 'Monoton', cursive;
    font-size: 35px;
    box-shadow: 15px 15px 23px rgba(0, 0, 0, .2);
    outline: none;
}
.wrapper {
    position: absolute;
    width: auto;
    height: 150px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}
.wrapper h1 {
    font-size: 100px;
    margin: 0;
    font-weight: normal;
    animation: neon2 3s infinite;
}
/*.wrapper h1 > span {
    color: #222;
    text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;
}*/

.wrapper h2 {
    font-size: 20px;
    margin: 0;
    font-weight: normal;
    text-shadow: 0 0 10px #E91E63, 0 0 30px #E91E9F;
    color: #E91E63;
    line-height: 10px;
}
.font1 {
    font-family: 'Monoton', cursive;
}
.font2 {
    font-family: 'Nixie One', cursive;
}
.font3 {
    font-family: 'Great Vibes', cursive;
}
@keyframes neon1 {
    0% {
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;
    }
    100% {
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #D41355;
    }
}
@keyframes neon2 {
    0% {
        color: #E91E63;
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;
    }
    80% {
        color: #E91E63;
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;
    }
    81% {
        color: #222;
        text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;
    }
    94% {
        color: #222;
        text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;
    }
    95% {
        color: #E91E63;
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;
    }
    96% {
        color: #222;
        text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;
    }
    97% {
        color: #E91E63;
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;
    }
    98% {
        color: #E91E63;
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;
    }
    99% {
        color: #222;
        text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;
    }
    100% {
        color: #E91E63;
        text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;
    }
}
@keyframes bgNeon2 {
    0% {
        background-color: #260127;
    }
    80% {
        background-color: #260127;
    }
    81% {
        background-color: #111;
    }
    94% {
        background-color: #111;
    }
    95% {
        background-color: #260127;
    }
    96% {
        background-color: #111;
    }
    97% {
        background-color: #260127;
    }
    98% {
        background-color: #260127;
    }
    99% {
        background-color: #111;
    }
    100% {
        background-color: #260127;
    }
}

HTML

Neon with CSS3 animation 在输入框中输入字符串，霓虹文本将随之动态改变。

angular.js, 文本特效

编辑器支持Emmet

快捷键

Neon with CSS3 animation 在输入框中输入字符串，霓虹文本将随之动态改变。

angular.js, 文本特效

HTML5 SVG 被水浸泡的文本特效

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：