发光文字动画效果：
<!doctype html><html><head><meta charset="utf-8"><title>jQuery+CSS3彩色霓虹灯发光文字动画特效</title><script src="js/jquery.min.js"></script><style>body { ?height: 100vh; ?box-sizing: border-box; ?background: #333; ?display: flex; ?flex-direction: column; ?justify-content: center; ?align-items: center; ?overflow-y: hidden;}body p{ ?color: #555; ?font-family: ‘Quicksand‘, sans-serif; ?font-weight: 900;}body p i{ ?transition: .5s;}.fa-codepen{ ??-webkit-animation: fade 3s infinite alternate; ?-moz-animation: fade 3s infinite alternate; ?-o-animation: fade 3s infinite alternate; ?animation: fade 3s infinite alternate;}a{ ?color: #ddd;}span { ?font-size: 6em; ?font-family: "Quicksand", sans-serif; ?font-weight: 500; ?color: #ddd; ?transition: .25s;}.pink { ?position: absolute; ?text-shadow: ????2px 2px 1px rgba(0,0,0,.4), ???0 0 20px #fe3a80, ???0 0 40px rgba(255, 0, 91, .75), ???0 0 50px rgba(255, 0, 91, .75), ???0 0 100px rgba(255, 0, 91, .75); }.pink:before{ ?content:‘‘; ?position: absolute; ?background: rgba(254, 58, 128, .25); ?z-index: -1; ?opacity: .7; ?filter: blur(50px); ?width: 100%; ?height: 100%;}.green { ?position: absolute; ??text-shadow: 2px 2px 1px rgba(0,0,0,.4), ???0 0 20px #69F0AE, ???0 0 40px rgba(0, 230, 118, .75), ???0 0 50px rgba(0, 230, 118, .75), ???0 0 100px rgba(0, 230, 118, .75); ??}.green:before{ ?content:‘‘; ?position: absolute; ?background: rgba(105, 240, 174, .25); ?z-index: -1; ?opacity: .7; ?filter: blur(30px); ?width: 100%; ?height: 100%;}.blue { ?position: absolute; ?text-shadow: ??2px 2px 1px rgba(0,0,0,.4), ?0 0 20px #42A5F5, ???0 0 40px rgba(33, 150, 243, .75), ?0 0 50px rgba(33, 150, 243, .75), ?0 0 60px rgba(33, 150, 243, .75); }.blue:before{ ?content:‘‘; ?position: absolute; ?background: rgba(66, 165, 245, .25); ?z-index: -1; ?opacity: .7; ?filter: blur(30px); ?width: 100%; ?height: 100%;}.buttons{ ?margin-bottom: auto; ?margin-top: 20px;}button{ ?margin: 0 5px; ?padding: 10px; ?letter-spacing: 1px; ?background: none; ?border: 2px solid #444; ?height: 2.25em; ?border-radius: 2.25em; ?color: #444; ?font-size: 1.25em; ?font-weight: bold; ?text-transform: uppercase; ?transition: .5s; ?outline: none;}button:nth-child(1):hover{ ?/*Green*/ ?color: #00E676; ?text-shadow: 0 0 7px #00E676; ?border-color: #00E676; ?box-shadow: 0 0 15px #00E676, inset 0 0 15px #00E676;}button:nth-child(2):hover{ ?/*Pink*/ ?color: #ff005b; ?text-shadow: 0 0 7px #ff005b; ?border-color: #ff005b; ?box-shadow: 0 0 15px #ff005b, inset 0 0 15px #ff005b;}button:nth-child(3):hover{ ?/*Blue*/ ?color: #2196F3; ?text-shadow: 0 0 7px #2196F3; ?border-color: #2196F3; ?box-shadow: 0 0 15px #2196F3, inset 0 0 15px #2196F3;}/*Animation*/@-moz-keyframes fade { ?40% { ???opacity: 0.8; ?} ?42% { ???opacity: 0.1; ?} ?43% { ???opacity: 0.8; ?} ?45% { ???opacity: 0.1; ?} ?46% { ???opacity: 0.8; ?}}@-webkit-keyframes fade { ?40% { ???opacity: 0.8; ?} ?42% { ???opacity: 0.1; ?} ?43% { ???opacity: 0.8; ?} ?45% { ???opacity: 0.1; ?} ?46% { ???opacity: 0.8; ?}}@-o-keyframes fade { ?40% { ???opacity: 0.8; ?} ?42% { ???opacity: 0.1; ?} ?43% { ???opacity: 0.8; ?} ?45% { ???opacity: 0.1; ?} ?46% { ???opacity: 0.8; ?}}@keyframes fade { ?40% { ???opacity: 0.8; ?} ?42% { ???opacity: 0.1; ?} ?43% { ???opacity: 0.8; ?} ?45% { ???opacity: 0.1; ?} ?46% { ???opacity: 0.8; ?}}</style></head><body><script src="/demos/googlegg.js"></script><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quicksand"><script src="js/typed.min.js"></script><div class="buttons"> ?<button onClick="colorChange(colors[0][0],colors[0][1] )">Green</button> ?<button onClick="colorChange(colors[2][0], colors[2][1])">Pink</button> ?<button onClick="colorChange(colors[1][0], colors[1][1])"> ???Blue ?</button></div><div id="typedStrings"> ?<p>Welcome!</p> ?<p>Gary</p> ?<p>欢迎O(∩_∩)O~</p></div><span id="span"></span><script type="text/javascript">$("#span").typed({ ?stringsElement: $("#typedStrings"), ?typeSpeed: 70, ?showCursor: false, ?contentType: "html"});var colors = [["green","#00E676"], ["blue","#2196F3"], ["pink", "#ff005b"]];var randomColor = colors[Math.floor(Math.random() * colors.length)];var initialColor = randomColor[0];var initialHeartColor = randomColor[1];function colorChange(color, heart){ ?$(‘#span‘).attr(‘class‘, ‘‘).addClass(color); ?$(‘body p i‘).css(‘color‘, initialHeartColor); ?$(‘body p i‘).css(‘color‘, heart);}colorChange(initialColor);</script></div></body></html>实现过程：
JS框架_(Typed.js)彩色霓虹灯发光文字动画
原文地址：https://www.cnblogs.com/1138720556Gary/p/9381692.html