Heim > Artikel > Web-Frontend > css3 klicken, um Welleneffekte anzuzeigen

css3 klicken, um Welleneffekte anzuzeigen

php中世界最好的语言Original: 2017-11-24 15:52:124513Durchsuche

Css3-Klick zum Anzeigen von Wellen-Spezialeffekten Wie erstelle ich CSS3 zum Klicken zum Anzeigen von Wellen-Spezialeffekten? Welche Aspekte sollten beim Klicken zum Anzeigen von Wellen-Spezialeffekten beachtet werden? Lassen Sie mich unten eine Fallstudie geben.

<!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;
}

Es gibt so viele Css3-Click-Display-Ripple-Effekte. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel !

Verwandte Lektüre:

So erstellen Sie eine Schmetterlingsfluganimation mit CSS3

Wie Sie Canvas verwenden, um die Interaktion zwischen dem Ball zu realisieren und die Maus

So verwenden Sie die Leinwand, um einen Partikelfontänen-Animationseffekt zu erstellen

Das obige ist der detaillierte Inhalt voncss3 klicken, um Welleneffekte anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie eine Schmetterlingsfluganimation mit CSS3Nächster Artikel：So erstellen Sie eine Schmetterlingsfluganimation mit CSS3

In Verbindung stehende Artikel

Mehr sehen