css3 クリックして波及効果を表示-CSSチュートリアル-php.cn

css3 クリックして波及効果を表示

php中世界最好的语言

リリース： 2017-11-24 15:52:12

オリジナル

4588 人が閲覧しました

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 中国語 Web サイトその他の関連記事に注目してください。

CSS3 で蝶が飛ぶアニメーションを作成する方法

キャンバスを使用してボールとマウスの相互作用を実現する方法

キャンバスを使用してパーティクルファウンテンの効果を作成する方法アニメーション

以上がcss3 クリックして波及効果を表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。