HTML/CSS Kreis Animation um Element bei Klick?

Hey, ihr kennt doch sicherlich die Animationen die Google verwendet. Ihr klickt auf einen Button und um den Button bildet sich ein Kreis beim Klick (Animation). Ich weiß, etwas Blöd erklärt aber falls ihr nicht versteht was ich meine, habe ich euch ein Bild da gelassen. Wir bekomme ich das mit HTML/CSS hin?

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

4 Antworten

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

15.04.2018, 00:10

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ß

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

14.04.2018, 23:10

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.

thomaszZz, Software Engineer bei gutefrage

15.04.2018, 11:36

Ich denke, er bezieht sich auf den Ripple-Effekt im Material Design.

Erzesel

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

15.04.2018, 10:41

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...

BrauchJzHilfe

14.04.2018, 22:38

Wohl eher mit Javascript

Johnny33RL

Beitragsersteller

14.04.2018, 22:41

Javascript wäre auch okay

Ähnliche Beiträge

Wie kann ich mit CSS ein anderes Element verändern?

also wenn ich zB. auf einen Button klicke, und irgendein anderes Element soll dann sichtbar werden.

Das geht doch auch mit CSS?

...zum Beitrag

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zum Beitrag

Wie macht man mit CSS eine kreisförmige Animation?

Also dass ein Objekt im Kreis oder in einer Spirale fliegt.

...zum Beitrag

HTML CSS - Button soll 10 Sekunden nach dem Klick ausgeführt werden?

Hallo,

sobald mein Button ( HTML / CSS / (JS) ) gedrückt wird, soll stehen: "Bitte warte noch 10 Sekunden". Nach den Sekunden soll der Button ausgeführt werden.

Wie geschieht das?

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

Frage zu CSS: Bild in einem Element strecken?

Hii,

bin gerade dabei mit vanilla js, css, html ein game zu entwickeln. So sieht es bis jetzt aus:

Wie kann ich machen, dass das Bild nach unten im Element gestreckt wird, statt doppelt gezeichnet. Mein css (unfertig) sieht so aus:

Mfg Weißbrot

...zum Beitrag

HTML Code CSGO Case Oepning?

Hallo,

ich suche einen HTML,CSS, Java Code der ein CSGO Case Opening animiert. Also man fügt Bilder ein und man klickt auf einen Roll Button und die Animation spinnt dann auf ein Bild.

...zum Beitrag

Ein "Create"-Button, der eine neue Seite erstellt über php?

Grob gesagt, habe ich vor einen "Create"-Button zu erstellen, der, wenn man auf ihn klickt, eine neue HTML-Seite erstellt, diese HTML-Seite, soll dann ein vorgefertigtes Design haben und soll eine bestimmte CODE haben, denn man wiederum irgendwo eingeben könnte. Als Beispiel könnte man "Discord" nehmen, mit dem Create und Join Buttons.

...zum Beitrag

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zum Beitrag

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zum Beitrag

NavBar auf jeder Unterseite einbauen (Webdevelopment)?

Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.

Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?

...zum Beitrag

Webseite sicherer machen?

Hallo, ich gabe mit einfachem HTML und CSS eine Webseite für mein Unternehmen programmiert, denn ich brauche eigentlich nur eine einfache Seite. Nun zur Frage: Wie kann ich diese Webseite sicherer machen? Verwendet habe ich nur Html und Css und ich will das Service von Google Cloud benutzen

...zum Beitrag

Mehrere Html seiten mit einer css Datei?

Kann man mit mehreren Html Dateien auf eine Css datei zugreifen um nicht alles von neu zu kopieren usw. Wenn man für alles eigene classes bzw. ids verwendet zB

...zum Beitrag

CSS Eigenschaften mit Button verändern?

Hallo,

ist es irgendwie möglich durch einen Button (also wenn man drauf klickt) in HTML CSS Eigenschaften von anderen Objekten zu verändern?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen