제이쿼리로 mouseenter, mouseleave 이벤트 주면서
children(), stop() 등 메서드 사용하기
.stop()으로 여러 번 이벤트가 반복되는 것을 방지.
children() 괄호 안에 어떤 자식요소를 지칭하는지 정확히 알려줌.
원형 로딩 애니메이션
html 은 div 안에 span 을 3개 만들어준다.
keyframes 를 loading 이라는 이름으로 만들어준 후
0, 50, 100% 를 만들어주고 scale 을 조정한다.
0.5에서 시작해 1.2 다시 0.5로 끝날 수 있도록 한다.
nth-child 1,2,3번으로 animation-delay 를 조금씩 늘려 조정한다.
div 안에 만들어뒀던 span 에 animation 을 주면 완성 !
로딩 화면 만드는 거 어려울 줄 알았는데 생각보다 간단해서 진작 시도해보지 않았던 과거의 나,,, 후회합니다 대굴 박습니다
transform scale 속성을 제대로 이해하지 못했었던 건 아닐까 생각해봤다.
더블 보더 애니메이션
div 안에 span 3개 두고 시작 ~!
불규칙한 border 3개를 만들기 위해 border-radius: 40% 60% 65% 35% / 40% 45% 60% 80% ;로 랜덤하게 찌그러진 원형 모양을 만들어준다.
span nth-child 가 돌아가게 animation circle 을 만들어준다.
@keyframes circle {
0%{
transform: rotate(0);
}
100%{transform: rotate(360deg);}
}
animation: circle 3s linear infinite; 을 span 에 준다.
원에 hover 하면 색을 나타낼 수 있도록 nth-child 로 background-color 를 각각 다르게 준다.
nav 만들 때 nav 메뉴 밑에 border 가 가운데에서부터 양쪽으로 길어지는 ui 보면 border-bottom 을 이용해 복잡하게 만드는 거라고 생각했는데,
가상선택자 before 나 after 를 사용해 background-color 와 position:absolute 를 사용해 만드는 거였다 ... !
알긴 아는데 정확히 모르니 어려울 거라고 생각했던 부분이 정말 많구나
transition 과 transform:translateX(50%), left:50% 값을 사용해서 정확히 가운데에 위치하게 한 후
밑에서 width:100% 값을 주면 된다.
transition 으로 만들 수 있는 UI 가 정말 많구나
