Существует такой HTML код:
<p class="logo">m
<span class="blink">y</span>
Po
<span class="blink">r</span>
tf
<span class="blink">o</span>
lio
</p>
Вот его стиль:
.logo {
position: relative;
cursor: default;
font: 400 4em 'flottflottregular';
color: #fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ffff00, 0 0 0.5em #ffff00, 0 0 0.1em #ffff00, 0 15px
5px #000;
}
Вот результат: Когда я попробуйте анимировать отдельные буквы, используя непрозрачность (применяя анимацию к классу .blink):
0% {opacity: 1;}
3% {opacity: 0.4;}
6% {opacity: 1;}
7% {opacity: 0.4;}
8% {opacity: 1;}
9% {opacity: 0.4;}
10% {opacity: 1;}
89% {opacity: 1;}
90% {opacity: 0.4;}
100% {opacity: 0.4;}
получается, что анимированные элементы имеют более насыщенную тень по сравнению с другими буквами:
Как исправить этот эффект?
Я также пытался анимировать с изменением тени текста, но браузеру трудно справиться с этим эффектом, и анимация имеет низкий FPS:
78% {
color: inherit;
text-shadow: inherit;
}
79% {
color: #333;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #333;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #333;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}