집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 클릭하면 파급 효과가 표시됩니다.

CSS3 클릭하면 파급 효과가 표시됩니다.

php中世界最好的语言원래의: 2017-11-24 15:52:124586검색

Css3 클릭하여 잔물결 특수 효과를 표시합니다. CSS3를 사용하여 잔물결 특수 효과를 표시하는 방법 잔물결 특수 효과를 표시할 때 주의해야 할 점은 무엇인가요? 사례를 하나 드리겠습니다.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>css3点击出现不同颜色涟漪特效</title>
<meta name="keywords" content=" css3点击出现不同颜色涟漪特效 " />
<meta name="description" content=" css3点击出现不同颜色涟漪特效 " />
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .ripple{
  position:absolute;
  width:100vmax;
  height:100vmax;
  top:-50vmax;
  left:-50vmax;
  border-radius:50%;
}
body{
  overflow:hidden;
}
.pad{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
    </style>
</head>
<body>
  <!-- touch or click -->
<div></div>
      <script src="js/index.js"></script> 
</body>
</html>
Css部分：
.ripple{
  position:absolute;
  width:100vmax;
  height:100vmax;
  top:-50vmax;
  left:-50vmax;
  border-radius:50%;
}
body{
  overflow:hidden;
}
.pad{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

Css3 파급 효과를 보려면 클릭하세요. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트기타관련 기사를 주목하세요!