Wie macht man ein Bild blinken?

Ich Frage mich, wie ein Bild zu machen, blinken in CSS, wenn es möglich ist. Ich will es blinkt, wo es ist.

Ich würde auch gerne die Geschwindigkeit ändern, aber hauptsächlich möchte ich es zum blinken.

  • Glaube nicht, dass es möglich ist nur mit CSS, aber Sie könnten es tun, mit Javascript.
  • Könnten Sie erklären, "blink" ein wenig mehr? Wollen Sie erhellen das Bild für einen Augenblick, oder schalten Sie es weiß oder eine andere Farbe?
  • Es gibt einen Grund, die <blink> tag starb einen schrecklichen Tod, die Sie kennen.
  • Sie können CSS-Animationen und keyframes für diese, aber das wäre ein bisschen übertrieben für ein einfaches Blinzeln.
InformationsquelleAutor user1623495 | 2012-08-24
  1. 47

    CSS-Animationen ist die Rettung!

    @keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

    http://jsfiddle.net/r6dje/

    Können Sie machen es zu einem scharfen Blinzeln durch die Anpassung der Intervalle:

    @keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

    http://jsfiddle.net/xtJF5/1/

    • Wenn ich das hover-Bild nicht blinken. Jede option?
    • Das ist großartig, aber es muss auch code für Chrome-Browser als auch.
    • Sie müssen auch hinzufügen, cross-browser-Kompatibilität-Regeln für keyframes (wie -moz-keyframes, -webkit-keyframes etc.), animation-iteration-count (wie -moz-animation-iteration-count, -webkit-animation-iteration-count etc.) und animation (-moz-animation, -webkit-animation etc).
    InformationsquelleAutor Waleed Khan
  2. 1

    mit setInterval-Methode von Javascript verwenden Sie es als Referenz W3Schools und ändern Sie dann die css von visibility:visible zu visiblity:hidden wir nicht verwenden display:none wie es wird, entfernen Sie den Speicherplatz des Bildes als gut, aber wir brauchen den Platz für das Bild, für das blinkende Ding zu arbeiten.

    • BTW bitte erstellen Sie eine formelle Rechnung auf ALSO. Es ist wirklich hilfreich. Danke. Ich hoffe, meine Antwort hilft.
    InformationsquelleAutor Dhruvenkumar Shah
  3. 1

    Können Sie es mit CSS ganz einfach. Fügen Sie einfach unterhalb der cross-browser-code in das CSS-element des Bildes. Sie können auch das timing ändern Sie die Ziffer in dem code. 

    -webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out; 
-ms-animation:blink normal 2s infinite ease-in-out; 
animation:blink normal 2s infinite ease-in-out;
    InformationsquelleAutor user1874941
Schreibe einen Kommentar