[코드펜] 애니메이션 효과 만들어 보기

CSS를 이용해서 요소 숨기기

오늘은 쉬어가는 시간?으로 코드펜을 이용해서 간단한 CSS애니메이션 효과를 만들어 보았습니다.

---

■ 네모 굴리기

네모를 열심히 굴려봅시다. 그림자는 가상요소를 이용해서 표현해 주었습니다.

■ 로딩처럼 계속 돌아가는 원 만들기

원 두개를 계속 돌려봅시다. 제 머리도 같이 돌아갈거 같네요.
.loading의 안에 circle이라는 원 두개를 만들어서 배치한 후 loading의 배경을 없앤상태로 뱅글뱅글 돌리면 마치 원이 돌아가는 시각효과를 가져올 수 있게 됩니다. 뱅글뱅글 돌아가는 속성과 관련된 값은 transform: rotate가 있습니다.

■ 어딜보시는거죠? 그건 제 잔상입니다만

(220902 추가내용)

원을 튕튕튕튕튕튕~~~~ 튕기게 만들어줍시다.그리고 잔상효과처럼 보이게 하기 위해서 5개의 원을만들어줍니다. 같은 클래스명을 부여하여 position:absoloute를 부여하면 한군데 모이게 되는데요. 여기서 애니메이션으로 움직이게 해주는데, animation-delay(지연시간)를 각각 다르게 주어 뒤따르게 보이게끔 만듭니다. 그럼 "어딜보시는거죠 그건제 잔상입니다만"이 완성됩니다. 끝