Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="Gegenstrom" data-source="post: 2695455" data-attributes="member: 104314">Ja es ist eine Animation und man nennt es auch so.Das ist ein apng, wie die anderen Benutzer bereits sagten. Und nein mit apng alleine kannst du deine Hover-Geschichte nicht realisieren.Wenn du wirklich nur, Smilie mit Brille und bei :hover Smilie mit zwinkern und hochgestecker Brille haben magst (zwei Zustände ohne Zwischenbilder).mehr Zustände: via Sprite(mehrere Bilder in einer Datei) - siehe dazu oder(ist die javascriptVariante von ner billigen css animation) und ersetze[CODE]background-image: url(https://mail.google.com/mail/im/emotisprites/wink2.png);[/CODE]mit[CODE]background-image: url(http://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png);[/CODE]Zwischending:statisches gif/png, bei hover animated gif(Wiederholungen:1)/mov abspielen.Kannst sogar via javascript nen gif/Video ansteuern.Animation Hover + Zurück:Brille, Brille hochgeklappt, wieder runterklappen. Kannst du via Javascript(onmouseover, onmouseout, onclick, etc...) realisieren. Nur über CSS funktioniert dass dann nicht mehr außer du magst bei dem Smilie eine Anfangsanimation haben, dann würde es auch nur mit CSS funktionieren.Wichtig wäre zu klären wofür du es benötigst, welchen Anspruch du stellst und wie es eingesetzt werden soll.Es gibt unendlich viele Varianten/Wege wie man es angehen/lösen könnte. Es kommt auf den Einsatzzweck und deine Anforderungen an. Und der/die ist/sind mir/uns nicht bekannt.Desweiteren: kommt es auch darauf an welche Programme du zur Verfügung hast, wie dein apng/gif/png (deine Animation/Bilder) vorliegt oder wieviel Aufwand du betreiben möchtest, wieviel Vorkentnisse du in bestimmten Programmen + HTML/CSS + div Scriptsprachen/Auszeichnungssprachen hast, bzw. wie leicht es dir fällt dich in neue Herausforderungen einzuarbeiten.Stichworte die ich mit deinem Thema assoziiere: <a href="https://www.mediaevent.de/css/css-selektor-pseudo.html" target="_blank">CSS Pseudoklassen</a>, CSS 3, CSS Animation, CSS Hover Animation, CSS Sprites, Web Animation, Codepen, dribble, Greensock (GSAP), Web Animation alternative, web animation tools, html5 animation tools, javascript animation, javascript play gif, javascript play png sequences, animated svg, SMIL, svg javascript animation etc ... tausend weitere Variationen und Varianten.Canvas funktioniert sicherlich (wobei ich noch nie wirklich mit Canvas in Berührung gekommen bin und denke dass es auch nicht für einen solchen Zweck konzipiert wurde?).animated svg(SMIL) funktioniert, ist aber aufwändiger.SVG kannst auch mit Javascript animieren.Beispiele: <a href="https://www.mediaevent.de/tutorial/svg-animation-css-javascript.html" target="_blank">https://www.mediaevent.de/tutorial/svg-animation-css-javascript.html</a>Solltest du ernsthaft Vektorgrafiken bevorzugen dann wirst du um svg nicht herum kommen.[SPOILER="Varianten für Einblick in Animationen"]Varianten wie ich vorgehen würde bzw. wie man die Animation allgemein erzeugen kann:<ul> <li data-xf-list-type="ul">After Effects in Verbindung mit Illustrator oder direkt in After Effects. In Illustrator die Vektoren aufbauen die ich animieren möchte: Brille, Gesichtform, Mund, Auge - zwei Zustände, Augenbrauen. Alles auf separate Ebenen. In After Effects die ai importieren, und in Pfade wandeln, animieren. Dann als mov exportieren und in apng wandeln, oder PNG Sequenz exportieren und in apng wandeln. </li> <li data-xf-list-type="ul">Photoshop Zeitleisten Animation. Da man mit Photoshop allerdings keine Pfade animieren kann? (war zumi mein letzter Kenntnisstand?) müsste man ein wenig tricksen. Sollte aber in einer etwas reduzierteren Variante trotzdem animiert werden können. (opacity, transform) Dann als mov exportieren und in apng wandeln, oder PNG Sequenz exportieren und in apng wandeln.</li> <li data-xf-list-type="ul">Flash, falls du es irgendwo noch liegen hast. Workflow wie Photoshop/After Effects + Actionscript. </li> <li data-xf-list-type="ul">animated svg/SMIL in Verbindung mit Illustrator oder du kannst Vektoren selber schreiben (Vektorgrafiken), wäre aber ne Ecke aufwändiger. Und du müsstest wahrscheinlich ebenfalls reduzieren. Da bin ich mir gerade unsicher, hab nicht sehr viel mit SMIL animiert, aber rein von meinen Erfahrungen würde ich vorerst davon abraten, da es viel Zeit in Anspruch nimmt und Chrome auch den Support von SMIL einstellen möchte. Wäre dann übrigens animated svg. Würde aber alles abdecken.</li> <li data-xf-list-type="ul">Animate CC, damit kenn ich mich nicht aus und hab es noch nie benutzt, aber würde ich mir bei Gelegenheit mal anschauen um zu wissen ob es wirklich dafür gemacht wurde. Ich glaube es enthält eine javascript-biblio um svg zu animieren... unsicher </li> <li data-xf-list-type="ul">Google Web Designer, der hat glaube ich Greensock(GSAP) implementiert und damit kann man glaube ich auch Pfade animieren(Kommt auf die Biblio an die dort verlinkt ist - Lizenz und so). Aber das kommt bei mir auch erst wenn ich die Gelegenheit finde, die Projekte stimmen um mich gänzlich damit auseinander zu setzen. </li> <li data-xf-list-type="ul"><a href="https://www.templatemonster.com/blog/html5-animation-tools/" target="_blank">Javascript Bibliotheken, Web Animations, Greensock oder dergleichen.</a></li> <li data-xf-list-type="ul">statische Varianten, CSS + HTML, Photoshop, CSS Sprites.</li> </ul>Egal wie, aber bei all diesem Kram solltest du dich etwas damit auseinandersetzen und belesen. <img src="/styles/default/xenforo/smilies/zwinker.gif"  class="smilie" loading="lazy" alt=";)" title="Wink    ;)" data-shortname=";)" />[/SPOILER]Gehört für mich in Webdesign, erst wenn die Anforderungen klar sind und es wirklich ein High-End-Kommerz-Produkt sein soll dann würde ich es in diesem Bereich lassen.Alle Angaben ohne Gewähr und frei aus dem Kopf geschrieben ohne alles zu überprüfen. Kann also auch Fehler enthalten. Bitte diesen Umstand zu berücksichtigen. Danke.</blockquote> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?