Reiner CSS3-Button-Klickwelleneffekt im Android-Stil

Kurzes Tutorial

css-ripple-effect ist ein cooler Button-Click-Ripple-Effekt im flachen Stil, der mit reinem CSS3 erstellt wurde. Dieser Effekt ist der Klickwelle im Materialdesign-Stil des Android-Systems nachempfunden.

Verwendung

Fügen Sie die Datei ripple.css in die Seite ein.

<link href="ripple.css" rel="stylesheet">

HTML-Struktur

Um einen Klickwelleneffekt für ein -Element zu erstellen, müssen Sie ihm nur die Ripple-Klasse hinzufügen.

<button type="button" class="ripple" >Primary</button>

CSS-Stil

Sie können den Stil des Clickwave-Effekts über die Datei ripple.css oder ripple.less ändern.

.ripple {
  position: relative;
  overflow: hidden;
  &:after {
    content: "";
    background: rgba(255,255,255,0.3);
    display: block;
    position: absolute;
    border-radius: 50%;
    padding-top: 240%;
    padding-left: 240%;
    margin-top: -120%;
    margin-left: -120%;
    opacity: 0;
    transition: all 1s;
  }
  &:active:after {
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    opacity: 1;
    transition: 0s;
  }
}

Das Obige ist der Inhalt des reinen CSS3-Button-Click-Wave-Effekts im Android-Stil. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).