YouTube のコメントにネオンカラーを適用する

Requirements

• Chat v2.0 Style Generator
  • Options
    • Animate in
    • Slide
    • Reverse slide

Additional CSS

/* Additional CSS */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 1s;
  animation-fill-mode: both;
}
yt-live-chat-text-message-renderer #author-name {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  animation: shadow 1s;
  animation-fill-mode: both;
}
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  animation: shadow 1s;
  animation-fill-mode: both;
} 
@keyframes shadow {
  0% {   
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
  90% {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
  100% { 
    text-shadow: none;
    color: #cccccc;
  }
}

It's like this.

Caution: This image is applying a mosaic.

イメージ画像