首頁 > web前端 > css教學 > 主體

css3點選顯示漣漪特效

php中世界最好的语言
發布: 2017-11-24 15:52:12
原創
4482 人瀏覽過

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中文網其它相關文章!

相關閱讀:

CSS3怎麼製作蝴蝶飛舞的動畫

怎麼用canvas實作小球和滑鼠的互動

怎麼用canvas做出粒子噴泉動畫的效果

以上是css3點選顯示漣漪特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!