Ich möchte wirklich, dass ein Textstück im Stil der alten Schule blinkt, ohne Javascript oder Textdekoration zu verwenden.
Keine Übergänge, nur * blink *, * blink *, * blink *!
BEARBEITEN : Dies unterscheidet sich von dieser Frage, da ich nach einem Blinken ohne kontinuierliche Übergänge frage , während das OP der anderen Fragen fragt, wie das Blinken durch kontinuierliche Übergänge ersetzt werden kann
html
css
css-animations
blink
m93a
quelle
quelle
@-webkit-keyframes
Regel nach der nicht festgelegten@keyframes
Regel zu haben scheint , und einige haben sogar die-webkit-animation
Erklärung nach der nicht festgelegten Regel.Antworten:
Das ursprüngliche Netscape
<blink>
hatte ein Tastverhältnis von 80%. Dies kommt ziemlich nahe, obwohl das Reale<blink>
nur Text betrifft:Weitere Informationen zu Keyframe-Animationen finden Sie hier .
quelle
blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }
) zu machen. Auf diese Weise können Sie einfach das<blink>
Tag anstelle von<span class="blink">
=)color
Eigenschaft als "Ein-Aus" -Blink-Animation.Lassen Sie mich Ihnen einen kleinen Trick zeigen.
Wie Arkanciscan sagte , können Sie CSS3-Übergänge verwenden. Aber seine Lösung sieht anders aus als das ursprüngliche Tag.
Was Sie wirklich tun müssen, ist Folgendes:
JSfiddle Demo
quelle
blink
fehlte der Name der Animation . Fest.0% 100% { opacity: 1.0; }
Abschnitte scheinen überflüssig zu sein, da sie Standard sind, nein?Versuchen Sie dieses CSS
Sie benötigen browser- / herstellerspezifische Präfixe: http://jsfiddle.net/es6e6/1/ .
quelle
Es besteht eigentlich keine Notwendigkeit für
visibility
oderopacity
- Sie können es einfach verwendencolor
, was den Vorteil hat, dass nur der Text "blinkt":Geige: http://jsfiddle.net/2r8JL/
quelle
<span>
Text mit Weiß auf Blau vor einem Text<body>
mit grünem Hintergrund. Nur in dieser Lösung blinkt der blaue Hintergrund nicht.Ich werde dafür zur Hölle gehen:
http://codepen.io/anon/pen/kaGxC (Sass mit Bourbon)
quelle
Undefined mixin 'experimental'.
Fehler und es sieht so aus, als würde er die Blinkanimation nicht kompilieren und anzeigen.Eine andere Variante
quelle
In meinem Fall blinkt der Text im Abstand von 1 Sekunde.
quelle
Wenn Sie einen Glow-Effekt wünschen, verwenden Sie diesen
quelle
Nachfolgend finden Sie eine Lösung für Ihren Code.
quelle