HTML/CSS Kreis Animation um Element bei Klick?

Der Kreis beim Klick auf den Button - (Computer, HTML, CSS)

4 Antworten

Ich weiß leider noch nicht genau, welchen Effekt du meinst / wie er aussieht. Könntest du ein Beispiel benennen oder verlinken, wo bei Google dieser Effekt sichtbar wird?

Um ein Klickevent zu registrieren, benötigst du auf jeden Fall JavaScript. Den Rest kann sicherlich CSS übernehmen. Eine praktische Umsetzung könnte also bereits damit beginnen, dass bei Klick JavaScript einem bestimmten HTML-Element den Namen eines CSS-Klassenselektor zum class-Attribut zufügt und zuvor bestimmte CSS-Properties zurücksetzt.

Wie Animationen mit CSS funktionieren, kannst du in unzähligen Anleitungen im Netz nachlesen. Der Kreis wird einfach mit border-radius:50% erzeugt.

Hier mal ein kleines Beispiel, wie so was aussehen kann:

https://jsfiddle.net/Babelfisch/psu3cr01/11/

Gruß

am einfachsten bekommst du wohl eine Animation per Animated-Gif hin.

hier ein passender Link zu einer pure-CSS-Lösung :

https://stackoverflow.com/questions/6813699/how-to-change-an-image-on-click-using-css-alone/17795397#17795397

das fiddle dazu:

http://jsfiddle.net/eliranmal/DwArh/

statt des ersten Kätzchen verwendest Du ein ruhendes Bild und statt der zweiten Mieze ein Animiertes Gif oder ein bild mit einem Kreis um den Button..., sehr viel anders macht es Google auch nicht...

Wohl eher mit Javascript

Javascript wäre auch okay

0

Was möchtest Du wissen?