Naprawdę chcę, aby fragment tekstu migał w starym stylu bez używania javascript lub dekoracji tekstu.
Żadnych przejść, tylko * mrugnięcie *, * mrugnięcie *, * mrugnięcie *!
EDYCJA : To różni się od tego pytania, ponieważ proszę o mruganie bez ciągłych przejść, podczas gdy OP innych pytań pyta, jak zastąpić mruganie ciągłymi przejściami
html
css
css-animations
blink
m93a
źródło
źródło
@-webkit-keyframes
regułę po@keyframes
regule bez prefiksu , a niektórzy mają nawet-webkit-animation
deklarację po tej bez prefiksu.Odpowiedzi:
Oryginalny Netscape
<blink>
miał 80% cykl pracy. Jest to dość blisko, chociaż rzeczywiste<blink>
dotyczy tylko tekstu:Więcej informacji na temat animacji klatek kluczowych można znaleźć tutaj .
źródło
blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }
). W ten sposób możesz po prostu użyć<blink>
tagu zamiast<span class="blink">
=)color
właściwością ie jako animacją „włącz-wyłącz”.Pokażę ci małą sztuczkę.
Jak powiedział Arkanciscan , możesz użyć przejść CSS3. Ale jego rozwiązanie wygląda inaczej niż oryginalny tag.
To, co naprawdę musisz zrobić, to:
JSfiddle Demo
źródło
blink
. Naprawiony.0% 100% { opacity: 1.0; }
Sekcje wydają się zbędne, ponieważ są domyślne, prawda?Wypróbuj ten CSS
Potrzebujesz prefiksów specyficznych dla przeglądarki / dostawcy: http://jsfiddle.net/es6e6/1/ .
źródło
Właściwie nie ma potrzeby
visibility
lubopacity
- możesz po prostu użyćcolor
, co ma tę zaletę, że „miga” tylko do tekstu:Skrzypce: http://jsfiddle.net/2r8JL/
źródło
<span>
z białym na niebieskim tle na<body>
zielonym tle. Tylko w tym rozwiązaniu niebieskie tło przęsła nie będzie migać.Idę za to do piekła:
http://codepen.io/anon/pen/kaGxC (sass z bourbonem)
źródło
Undefined mixin 'experimental'.
błąd, dlatego wygląda na to, że nie skompiluje się i nie wyświetli animacji migania.Kolejna odmiana
źródło
W moim przypadku działa migający tekst w odstępach 1s.
źródło
jeśli chcesz uzyskać efekt blasku, użyj tego
źródło
Poniżej znajdziesz rozwiązanie dla swojego kodu.
źródło