순수 CSS3 Android 스타일 버튼 클릭 웨이브 효과

간단한 튜토리얼

css-ripple- effect는 순수한 CSS3를 사용하여 만든 멋진 플랫 스타일 버튼 클릭 파급 효과입니다. 이 효과는 Android 시스템의 머티리얼 디자인 스타일 클릭 웨이브를 모델로 합니다.

사용법

ripple.css 파일을 페이지에 소개합니다.

<link href="ripple.css" rel="stylesheet">

HTML 구조

bb9345e55eb71822850ff156dfde57c8 요소에 클릭 물결 효과를 만들려면 잔물결 클래스를 추가하기만 하면 됩니다.

<button type="button" class="ripple" >Primary</button>

CSS 스타일

ripple.css 파일이나 ripple.less 파일을 통해 클릭웨이브 효과의 스타일을 수정할 수 있습니다.

.ripple {
  position: relative;
  overflow: hidden;
  &:after {
    content: "";
    background: rgba(255,255,255,0.3);
    display: block;
    position: absolute;
    border-radius: 50%;
    padding-top: 240%;
    padding-left: 240%;
    margin-top: -120%;
    margin-left: -120%;
    opacity: 0;
    transition: all 1s;
  }
  &:active:after {
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    opacity: 1;
    transition: 0s;
  }
}

위 내용은 순수 CSS3 안드로이드 스타일 버튼 클릭 파동 효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!