script無しでネオンサイン風点滅CSS

カーソル合わせると変化します。

<style>
#frame1 {
    background-color: black;
}

.neonsign {
  font-size: 80px;
  color: #550000;
  padding: 20px;
}

.neonsign:hover {
  color: #882222;
  text-shadow: 0 0 45px #ff5555;
  text-decoration: blink;
  animation: blink 0.5s step-end infinite;
  -webkit-animation: blink 0.5s step-end infinite;
}

@keyframes blink {
  90%  { opacity: 0.5; }
  35% { opacity: 0.5; }
}
@-webkit-keyframes blink {
  90%  { opacity: 0.5; }
  35% { opacity: 0.5; }
}

</style>

<div id="frame1">

<div class="neonsign">
Neon Sign
</div>

</div>