• CSS

CSS의 KEYFRAMES를 이용하여 _ 표시 나타내기

2018-12-05 172

설명

  • 카카오톡 링크

CSS의 KEYFRAMES를 이용하여 _ 표시 나타내는 소스입니다~

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.test_h2 {font-size:26px; font-weight:400; color:#404040}
	.test_h2 span {display:inline-block; position:relative;}
	.test_h2 span:after {content:""; position:absolute; bottom:-2px; width:16px; height:4px; background:#f2849e; animation: wow_effect 1s linear infinite; opacity:1; }
	@keyframes wow_effect {
		0% {
			opacity: 0
			}
		50%{
			opacity: 0
			}
		50.01%{
			opacity: 1
			}
		100%{
			opacity: 1
			}
		
	}
</style>

<h2 class="test_h2">테스트입니다<span></span></h2>