CSS
【CSS】ネオンライトテキスト効果CSS Neon Light Text Effects
September 22, 2017

CSS Neon Light Text EffectsはCSSのネオンライトテキスト効果
<h1 class="neon" data-text=" # HAPPY BDAY"> # HAPPY BDAY</h1>
.neon { position: absolute; text-align: center; top: 40%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0 20px; font-size: 4em; color: #fff; text-shadow: 0 0 20px #00aced; } .neon:after { content: attr(data-text); position: absolute; z-index: -1; color: #00aced; top: 0; left: 0; margin: 0; padding: 0 20px; filter: blur(15px); } .neon:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1dcaff; z-index: -2; opacity: .5; filter: blur(80px); }