css3点击显示涟漪特效

来源：九五美食网

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点击显示涟漪特效就这么多了，更多精彩请关注Gxl网其它相关文章！

全部频道

css3点击显示涟漪特效