깜놀하는 해므찌로

Tailwind active 클릭 하는 시점 효과 / 버튼 효과 본문

IT

Tailwind active 클릭 하는 시점 효과 / 버튼 효과

agnusdei1207 2023. 5. 18. 14:42
반응형
SMALL

<app-icon
          [src]="isSwiperRunning ? 'assets/icon/pause.svg' : 'assets/icon/resume.svg'"
          class="w-4 h-4 text-white transition-all active:scale-110"
        />

1. 클릭 시 active:

2. scale-110 : 클릭하는 순간 커지고 다시 작아짐

3. trasition-all : 자연스러운 효과를 위해 서서히 동작하도록 설정

반응형
LIST

'IT' 카테고리의 다른 글

Tailwind Aside bar 생성 / drawer  (0) 2023.05.18
Tailwind 로딩 화면 spinner  (0) 2023.05.18
Angular route 메뉴 셋팅 예시  (0) 2023.05.18
typescript 가변인자, typescript rest parameter 활용 예시  (0) 2023.05.18
Tailwind 모바일 CSS 배경 이미지 / 늘리거나 깨지지 않고 깔끔하게 배경 채우기  (0) 2023.05.17
'IT' Related Articles more