후니후니

  • 홈
  • 태그
  • 방명록

Animation 1

SVG를 이용한 애니메이션 효과

✏️SVG를 이용한 애니메이션 효과를 알아보자 보통, 로딩바 같은 경우 동그라미가 계속 돌아가는 형태를 많이 쓰기 때문에 쉽게 볼 수 있다. HTML,CSS로만 저걸 구현할 수 있나? 생각을 하다, SVG로 구현을 할 수 있다는 것을 알게 되었다. 우선 HTML을 보자. svg 태그 안에 circle 태그를 생성하고, cx 50%, cy 50%, r 25로 설정해준다. cx, cy는 중심점이고, r은 반지름으로 25일 경우 50 크기인 circle이 생긴다. 위의 html이라면, 위처럼 동그란 검은 공이 하나 생긴다. 로딩 애니메이션이라면, 가운데는 비어야 하고, 테두리만 있어야 하는데, 이는 CSS로 설정해줄 수 있다. fill: transparent; stroke: blue; stroke-width:..

JavaScript 2020.11.30
이전
1
다음
더보기
프로필사진

후니후니

  • 분류 전체보기 (83)
    • Vue-cli 배포 (2)
    • ES6 (1)
    • 디자인 패턴 (3)
    • JavaScript (12)
    • TIL (21)
    • CSS (3)
    • 포트폴리오 제작기 (3)
    • Cypress (3)
    • React.js (10)
    • Nuxt.js (5)
    • TypeScript (3)
    • Vuetify (1)
    • Vue.js (3)
    • Github Action (1)
    • Three.js (2)
    • Pinia (4)
    • etc (2)
    • React Native (2)
    • DB (2)

Tag

Core Components, Store, Cypress, 타입스크립트, react query, vue, JS, composition, react-query, NUXT, frontend, 자바스크립트, pinia, Front, 포트폴리오, vuetify, Redux, vue3, e2e, react,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바