비전공자 개발일기

Neon Text Glow Animation 본문

HTML _CSS

Neon Text Glow Animation

HiroDaegu 2022. 5. 1. 00:55
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Text Glow Animation</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <i class="fab fa-instagram"></i>
    <i class="fab fa-facebook"></i>
    <i class="far fa-star"></i>
  </div>
</body>
</html>
.container {
  background-color: #000;
  margin: 500px;
  text-align: center;
  font-size: 30px;
  width: 200px;
  height: 50px;
}

.fab{
  color: #fff;
  animation: first_color .5s ease-in-out infinite alternate;
}

.fab:nth-child(2) {
  animation-name: second_color;
}

.far{
  color: #fff;
  animation: third_color .5s ease-in-out infinite alternate;
}

@keyframes first_color {
  0% {
    text-shadow: 0 0 10px #ff1177, 0 0 20px #d6249f, 0 0 30px #285aeb;
  }
  100% {
    text-shadow: 0 0 5px #ff1177, 0 0 10px #d6249f, 0 0 15px #285aeb;
  }
}

@keyframes second_color {
  0% {
    text-shadow: 0 0 10px #1877f2, 0 0 20px #1459b3, 0 0 30px #179bff;
  }
  100% {
    text-shadow: 0 0 5px #1877f2, 0 0 10px #1459b3, 0 0 15px #179bff;
  }
}

@keyframes third_color {
  0% {
    text-shadow: 0 0 10px #25d366, 0 0 20px #48ee85, 0 0 30px #0ec0a5;
  }
  100% {
    text-shadow: 0 0 5px #25d366, 0 0 10px #48ee85, 0 0 15px #0ec0a5;
  }
}

 

 

728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Instagram Notification Animation  (0) 2022.05.06
Card With Glass Effect  (0) 2022.05.03
Scanner Animation  (0) 2022.04.30
Love Animation  (0) 2022.04.29
Profile Card  (0) 2022.04.28
'HTML _CSS' Related Articles more