[html/css] @keyframes 를 활용한 텍스트 효과 - 첫번째

안녕하세요

@keyframes를 활용한 텍스트 효과를 소개해 드리려고 합니다

 

간단하고 쉬워서 여러분 모두 따라 하실 수 있습니다

 

 

예쁜 텍스트 효과

 

이 정도이고요

 

잘 사용할 일은 없지만 그래도 간단하고 이뻐서 알아두시면 좋은 것 같습니다

 

우선

@keyframes에 대해 알아보겠습니다

 

쉽게 생각해서 애니메이션 효과를 주고 싶은 곳에

@keyframes를 주시면 돼요

 

예를 들어)

@keyframes test {
    /* from = 0% */
	from {
      ...
    }
    
    50% {
      ...
    }
    
    /* to = 100% */
    to {
      ...
    }
}

이런 식으로 해서

from >> 50% >> to까지

어떤 효과를 줄 건지에 대한 걸 {} 중괄호 안에 넣으시면 됩니다

 

간단한 효과를 먼저 한번 보자면

<p>하늘 하늘</p>

p {
 animation : move 3s infinite;
 /* animation : keyframes의 이름, 몇 초동안, 무한대 */
}

@keyframes move {
  from {
  	transform : translateY(0px);
  }
  50% {
	transform : translateY(-20px);
  }
  to {
    transform : translateY(0px);
  }
}

 

@keyframes의 동작 원리 알아보기

 

여기서

transform과 translateY 속성은

 

간단하게 설명드리자면

transform  : 어떤 것을 돌리고 바꾸는 효과

translateY : Y축으로 이동하게 해 줍니다

 

이제 위로 아래로 움직이는 효과는 되었으니

마지막으로 텍스트 밑에 shadow라고 해야 하나..?

텍스트를 뒤집었다고 해야 하나..?

 여하튼 저 효과를 어떻게 주는지 알아볼게요

 

body {
  margin: 0;
  padding: 0;
  font-family: "Cute Font", cursive;
  background: rgb(70, 206, 255);
}

p {
 /* 추가한 기능 */
 -webkit-box-reflect: below -20px linear-gradient(transparent, #0007);
 color: white;
 
 animation : move 3s infinite;
}

@keyframes move {
  from {
  	transform : translateY(0px);
  }
  50% {
	transform : translateY(-20px);
  }
  to {
    transform : translateY(0px);
  }
}

-webkit-box-reflect 기능을 사용해서 글자 아래에 똑같은 글자를

뒤집어서 위치시킬 수 있습니다

 

reflect가 비추다, 반사하다 라는 뜻입니다

 

below(아래에), -20px(이 만큼에 위치시키고) linear-gradient(색상 지정)

이렇게 하면 맨 위의 동영상과 같은 효과를 만들 수 있습니다

 

아!! html에 <p> 하늘하늘 </p> 은 고정이에요

 

어떠신가요??

생각보다 어렵지도 않고 쉽게 이쁜 텍스트 효과를 줄 수 있지 않나요??

 

이건 정말 간단하고 쉬운 효과이고

흥미로워서 더 찾아보시는 분들은 훨씬 더 많은 엄청난 효과를 공부하실 수 있을 거예요

 

혹시 해보시다가 궁금한 점은 댓글 남겨주시면 제가 보는 즉시 바로 답변 남겨드릴게요

또한, 더 좋은 방법이 있다면 댓글로 적어주셔도 너무 감사합니다