코드펜을 이용해서 애니메이션 효과를 만들어 봐요!

애니메이션 효과

코드펜을 이용해서 애니메이션 효과를 html과 css를 이용해서 만들어 봤습니다!

 

 

01.움직이는 두 원 

 

 

HTMl

<div class = "loding">
  <span class = "circle1"></span>
  <span class = "circle2"></span>
</div>

만드는 방법

• div를 만들어 준 후 span을 만들어 준 후 class요소를 이용해서 loding과 circle1,2를 만들어 주면 html은 끝입니다.

 

CSS

body {
  height : 100vh;
  background-color : #111;
}
.loding {
  left : 50%;
  top : 50%;
  position : absolute;
  animation : loding 1s ease 1000;

}
.circle1 {
  display : block;
  height : 20px;
  width : 20px;
  background-color: #fff;
  border-radius : 50px
}
.circle2 {
  display : block;
  height : 20px;
  width : 20px;
  background-color: #fff;
  margin-top : 110px;
  border-radius : 50px
}
@keyframes loding {
  0%{
    transform : translate(-50%, -50%)
      rotate(0deg);
  }
   100%{
    transform : translate(-50%, -50%)
      rotate(360deg);
  }
}

사용된 요소

•  vh : 는 viewport height를 나타내는 상대 단위입니다. viewport란 현재 브라우저 창에 표시되는 웹페이지 영역을 의미합니다. vh는 viewport의 높이를 기준으로 크기를 조정합니다. 
• absolute : 가장 가까운 상위요소 감싸고 있는 div 배치를 한다 박스가 없을 경우 뷰포트 기준으로 배치를 할 수 있습니다. 
• 애니메이션 : 1s 한번 돌 때 1초 적용 시킨함수 ease함수 애니메이션 멈추기 전까지 1000번 재생할 수 있습니다.
• Keyframes : 애니메이션을 더욱 세밀하게 제어할 수 있는 기능입니다. keyframes는 애니메이션을 제어하는데 사용되는 시간 기반으로 지정된 애니메이션을 정의합니다. 각 keyframe은 특정 지점에서 애니메이션의 상태를 정의합니다.
•  border-radius : 네모난 각진 부분을 둥글게 해주는 효과

설정하는 방법

• body로 전체를 만들어 준후 heigth값과 bgc를 설정 해줍니다.
• Html에서 css속성을 부여해준 값을 복사해서 .을 이용해 붙여넣은 후 각 필요한 css속성을 부여해줍니다. 
• loding에 속성들을 먼저 부여해주는 이유는 circle의 부모 요소이기에 circle에게 들어갈 요소를  한번에 주기 위해서입니다.
• 후에 circle1, 2 에게 각각 필요한 속성들을 부여해 줍니다.
• 마지막 keyframes를 이용해서 애니메이션 효과를 세밀하게 제어 해줍니다.

 

 

 

완성 된 애니메이션

See the Pen Untitled by younajeong (@younajeong) on CodePen.

 

 

 

02.통통 튀는 글자 

 

 

HTMl

<h1>
  <span>J</span>
  <span>A</span>
  <span>V</span>
  <span>A</span>
</h1>

만드는 방법

• <h1>태그와 <span>태그를 이용해 글자를 써줍니다. 

 

 

CSS

body {
  width : 100%;
  height : 100%;
  background-color: #ff7777;
  display : flex;
  justify-content: center;
  align-items: center;
/* align-items 같은 위치로 두려고 센터로 다 맞춰놓음 
  .은 클래스에만 부여됨*/
}
h1{
 height: 100px;
}
h1 span {
  position : relative;
  top : 20px;
  display : inline-block; 
/*  인라인 구조와 블록 구조를 똑같이 사용할 수 있음    */
  animation : bounce .3s ease infinite alternate;
  font-size :80px;
  font-family : bold;
  color : #fff;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #ccc,
               0 3px 0 #ccc, 
               0 4px 0 #ccc, 
               0 5px 0 #ccc, 
               0 6px 0 transparent, 
               0 7px 0 transparent, 
               0 8px 0 transparent, 
               0 9px 0 transparent; 
                              
}
h1 span:nth-child(2){animation-delay : .1s;}
h1 span:nth-child(3){animation-delay : .2s;}
h1 span:nth-child(4){animation-delay : .3s;}
/* 띄어쓰기 해주기 */

@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #ccc,
                 0 3px 0 #ccc, 
                 0 4px 0 #ccc, 
                 0 5px 0 #ccc, 
                 0 6px 0 #ccc, 
                 0 7px 0 #ccc, 
                 0 8px 0 #ccc, 
                 0 9px 0 #ccc,
                 0 50px 25px rgba(0, 0, 0, .2)
    
/* 위에 속성값이 없으면 keyframes값을 적용하지 못한다.키프레임은 기준점이 있어야한다.       */
/*  투명도 넣은 이유 바닥칠 때 짧게 보이기 위해서    */
  }
}

사용된 속성

• text-shadow : 텍스트 주위에 그림자 효과를 추가할 수 있습니다. 이 속성을 사용하면 텍스트를 더욱 돋보이게 할 수 있으며 3D효과를 낼 수 있습니다.  '0 1px 0 #ccc,' 차례대로 x의 값 y의 값, 블러효과 마지막은 컬러의 값으로 부여해줍니다.
• h-shadow: 그림자의 수평 거리를 나타내는 값입니다. 양수일 경우 오른쪽 방향으로, 음수일 경우 왼쪽 방향으로 그림자가 표시됩니다.
• v-shadow: 그림자의 수직 거리를 나타내는 값입니다. 양수일 경우 아래쪽 방향으로, 음수일 경우 위쪽 방향으로 그림자가 표시됩니다.
• blur-radius: 그림자의 흐림 정도를 나타내는 값입니다. 값이 클수록 더 흐린 그림자가 생성됩니다
• color: 그림자의 색상을 지정하는 값입니다. 기본값은 텍스트의 색상과 동일합니다.

• transparent : CSS에서 색상을 지정할 때 사용합니다. 완전히 투명한 색상을 나타내며 어떠한 색상도 표시되지 않습니다. 따라서 배경색, 테두리 색상을 지정해서 사용할 수 있습니다.
• nth-child : CSS 에서 요소의 순서에 따라 스타일을 적용하는 가상 클래스 선택자 중 하나입니다. 이 선택자는 :nth-child(an+b) 형식으로 사용됩니다.

 

 

완성 된 애니메이션

See the Pen Untitled by younajeong (@younajeong) on CodePen.