HTML5 복습, 다양한 Hover effect(학습 33일차 TIL)

김영진·2021년 7월 23일
0

210723 오늘은 어제 배운 HTML5 태그들을 복습하고, transform을 활용한 다양한 hover effect에 대해 학습했다.

CSS tips

  • inline요소는 transform 적용이 안 된다.
  • transform은 속성 순서에 따라 animation 효과가 달라진다.
transform: rotate(10deg) scale(1.5) translateX(40px);
/* 각 효과의 순서에 따라 효과가 달라진다... */
  • background 속성은 (,)로 구분하여 여러 효과를 중복 시킬 수 있다.
background: url(../images/bg-bike.png) no-repeat 50% 88%,
            linear-gradient(to bottom, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.16) 92%, rgba(0,0,0,0.0) 98%);
/* 작은 이미지가 먼저 나오도록 한다. */
  • background 속성의 갯수 만큼 변경할 값을 지정하자.
    ex) transition 효과를 위해 position을 이동할 경우 background-position: 150% 88%, 0 0;
profile
UI개발자 in Hivelab

0개의 댓글