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

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

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

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

HTML Hilfe?

Ich habe meine erste HTML-Datei geschrieben.

Ich habe auf der Hauptseite einen Link eingebaut, der auf eine zweite Seite dieser Webseite weiterleitet. Also man klickt auf einen Button und kommt auf eine andere, interne Seite.

<a href="/Impressum.html" target="_blank">Impressum</a>

Aber wenn ich drauf klicke, dann werde ich zwar weitergeleitet, aber dann kommt das hier.

Und ja, die Seite, auf die man weitergeleitet werden soll existiert. Ich kann auch in meiner Datei drauf klicken und komme dann dorthin.

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

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

Javascript (jQuery) / HTML Button mehrmals verwenden?

Hey, ich habe euch hier gleich mal ein JsFiddle verlinkt damit ihr mein Problem besser verstehen könnt: https://jsfiddle.net/Johnny3_3/dqqrvm6q/

Wenn ihr auf den Start Button klickt, dann wird durch Javascript (jQuery) der Kreis sichtbar gemacht. Allerdings kann ich durch das erneute klicken auf den Button den Kreis nicht verschwinden und danach nochmal sichtbar machen lassen. Sprich ich will unendlich oft auf den Button klicken können und somit den Kreis sichtbar und unsichtbar machen.

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

Wie HTML Animation die aus verschiedenen Dateien besteht einbinden?

Ich habe eine interaktive HTML Animation bekommen. Dieser Ordner besteht aus vielen verschiedenen dateien. Bilder, Videos, CSS, JS. Ich möchte diese Animation nun auf meiner Website einbinden.

Ich bin ehrlich gesagt etwas überfordert. Ich weiß wie ich HTML Code einbinde etc. Aber nicht ein Content Element welches sich aus vielen verschienden Dateien zusammensetzt.

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

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

Was möchtest Du wissen?

Deinen Beitrag erstellen