요소 배경을 위한 4가지 간단한 CSS 호버 전환

이 비디오는 클릭 가능한 요소에서 CSS 배경 전환을 수행할 수 있는 4가지 방법을 보여줍니다. CSS 전환은 특히 종종 모바일 및 태블릿 장치에 더 이상 클릭할 수 있는 제목이나 버튼이 없기 때문에 유용합니다. 읽어보기. 대신 전체 요소를 클릭할 수 있습니다.


멋진 CSS 호버 효과를 가질 수 있으면 데스크탑의 사용자가 요소를 클릭할 수 있다는 것을 알 수 있습니다. CSS와 전환을 사용하여 접근할 수 있는 다양한 방법이 있습니다.

우리는 다음을 살펴볼 것입니다:

배경색 변경

전환 사용

:before와 같은 특수 CSS 요소 사용

다음과 같은 다양한 전환 효과 적용:

절대값을 사용하여 하향식 전환

border-radius를 사용하여 원형 전환 만들기

border-width를 사용하여 각진 전환 생성

배경 전환 1

부드러운 전환으로 배경을 바꾸는 것만으로도

.v1 {
  transition: 0.25s ease background;
  &:hover {
    background:#e1e1e1;
  }
}

배경 전환 2

오버레이를 위에서 아래로 밀기

.v2 {
  position: relative;
  overflow: hidden;
  h2,.img,p {
    position: relative;
  }
  &:before {
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;right:0;
    bottom:100%;
    background:#e1e1e1;
    transition: 0.25s ease bottom;
  }
  &:hover {
    &:before {
      bottom:0%;
    }
  }
}

배경 전환 3

가운데에서 확장되는 원 만들기

.v3 {
    position: relative;
    overflow: hidden;
    h2,.img,p {
        position: relative;
    }
    &:before {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        border-radius:50%;
        width:0%;
        padding-top:0%;
        transform: translate(-50%,-50%);
        background:#e1e1e1;
        transition: 0.5s ease padding-top, 0.5s ease width;
    }
    &:hover {
        &:before {
            width:150%;
            padding-top:150%;
        }
    }
}

배경 전환 4

오른쪽 위에서 왼쪽 아래로 오는 각도 만들기

.v4 {
    position: relative;
    overflow: hidden;
    h2,.img,p {
        position: relative;
    }
    &:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:0px;
        height:0px;
        border-style:solid;
        border-width:0px 0px 0 0;
        border-color:#e1e1e1 transparent transparent transparent;
          transition: 0.5s ease border-width;
    }
    &:hover {
        &:before {
            border-width:800px 800px 0 0;
        }
    }
}

더보고 싶어:

매일 새롭고 멋진 콘텐츠를 게시하도록 노력하겠습니다. 최신 항목은 다음과 같습니다.