블로그 이미지

Gicomong (Lux)

  • 분류 전체보기
    • 개발 기술
      • 사소하지만 놓치기 쉬운 개발 지식
      • css 애니메이션 (with js)
      • 개발 이야기
      • jest로 테스트하자
      • 함수형 프로그래밍
      • 타입스크립트
    • 사용자의 접근성 높이는 방법
      • W3C 기준
    • 조직 문화
    • 이번엔 이 공부 끝내겠다 시리즈
      • 테스트코드
      • github actions
      • 정규표현식
    • 라이브러리 파헤치기
    • error log
    • 주저리
Visits

Mong dev blog

  • 관리
  • 글쓰기
  • 방명록
  • 로그인
  • 로그아웃

css 웨이브 애니메이션1

물결치는 애니메이션을 만들어보자! (with, rotate)
이번 시간에는 물결치는 애니메이션을 만들어봅시다! 1. preview See the Pen wave_alphacon_2 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html wrap는 wave의 부모로, 배경 역할을 한다. wave들은 물결 역할을 한다. 총 2개의 wave를 겹쳐서 사용한다. 2) scss (1) 기본 속성 부여하기 A. wrap 클래스에 기본 스타일 주기 .wrap { width: 300px; /*[1]*/ height: 300px; /*[1]*/ position: relative; /*[2]*/ border-radius : 50%; /*[3]*/ background: ...; ... } [1] 부모역할을 하는 wrap 클래스에 높이 넓..
2021. 10. 9.
이전 1 다음

티스토리툴바