[HTML/CSS]Neon 애니메이션

 

HTML/CSS

<style>
div { background: url(https://i.ibb.co/xM7kx0T/bg.jpg) no-repeat; width: 500px; heigth: 340px;}
.neon { animation: neon 1.5s 0s infinite linear; }

@keyframes neon {
	0%{opacity:1;}
	3%{opacity:0.8;}
	5%{opacity:0.4;}
	9%{opacity:1;}
	10%{opacity:0.8;}
	35%{opacity:1;}
	38%{opacity:0.3;}
	40%{opacity:1;}
	50%{opacity:0.5;}
	55%{opacity:1;}
	59%{opacity:0.7;}
	64%{opacity:1;}
	75%{opacity:1;}
	78%{opacity:0.3;}
	80%{opacity:1;}
	82%{opacity:0.5;}
	82%{opacity:1;}
	90%{opacity:1;}
	94%{opacity:1;}
	100%{opacity:1;}
}
</style>

<div>
  <img class="neon" src="https://i.ibb.co/F3s0vwP/title.png">
</div>

 

 

Codepen

See the Pen [HTML/CSS]Neon 애니메이션 by TytanLee (@TytanLee) on CodePen.

 

원본 : 깜보랜딩페이지