#javascript #css
Вопрос:
У меня проблема с моим кодом неонового свечения. Это приводит к тому, что другие CSS-анимации отстают и становятся очень изменчивыми. Я заметил, что это происходит, когда я снимаю последний кадр анимации, используя параметры заливки анимации «оба». Всякий раз, когда я меняю обе части на » НЕТ » или просто удаляю их, другие анимации работают просто отлично. Есть какие-нибудь идеи?
<script type="text/javascript">
const header = window.document.getElementById("party-box-header");
const captionONE = window.document.getElementById("party-box-caption-one");
const captionTWO = window.document.getElementById("party-box-caption-two");
const captionTHREE = window.document.getElementById("party-box-caption-three");
const captionFOUR = window.document.getElementById("party-box-caption-four");
// ------------------------------------------------------------------------
const flickerLetter = letter => `<span class="display-1" style="
animation: text-flicker-in-glow ${Math.random()*4}s linear both;
-o-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
-ms-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
-moz-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
-webkit-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
color: hsla(${Math.random()*360}, 100%, 80%, 1)">${letter}</span>`
const flickerAndColorText = text =>
text
.split('')
.map(flickerLetter)
.join('');
// ------------------------------------------------------------------------
const flickerLetterONE = letter => `<span class="h6" style="
animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
">${letter}</span>`
const colorLetterONE = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}amp;nbsp;amp;nbsp;</span>`;
const flickerAndColorTextONE = text =>
text
.split('')
.map(flickerLetterONE)
.map(colorLetterONE)
.join('');
// ------------------------------------------------------------------------
const flickerLetterTWO = letter => `<span class="h6" style="
animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
">${letter}</span>`
const colorLetterTWO = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}amp;nbsp;amp;nbsp;</span>`;
const flickerAndColorTextTWO = text =>
text
.split('')
.map(flickerLetterTWO)
.map(colorLetterTWO)
.join('');
// ------------------------------------------------------------------------
const flickerLetterTHREE = letter => `<span class="h6" style="
animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
">${letter}</span>`
const colorLetterTHREE = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}amp;nbsp;amp;nbsp;</span>`;
const flickerAndColorTextTHREE = text =>
text
.split('')
.map(flickerLetterTHREE)
.map(colorLetterTHREE)
.join('');
// ------------------------------------------------------------------------
const flickerLetterFOUR = letter => `<span class="h6" style="
animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
-webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
">${letter}</span>`
const colorLetterFOUR = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}amp;nbsp;amp;nbsp;</span>`;
const flickerAndColorTextFOUR = text =>
text
.split('')
.map(flickerLetterFOUR)
.map(colorLetterFOUR)
.join('');
const neonGloryFOUR = target => captionFOUR.innerHTML = flickerAndColorTextFOUR(captionFOUR.textContent);
const neonGloryTHREE = target => captionTHREE.innerHTML = flickerAndColorTextTHREE(captionTHREE.textContent);
const neonGloryTWO = target => captionTWO.innerHTML = flickerAndColorTextTWO(captionTWO.textContent);
const neonGloryONE = target => captionONE.innerHTML = flickerAndColorTextONE(captionONE.textContent);
const neonGlory = target => header.innerHTML = flickerAndColorText(header.textContent);
neonGlory(header);
neonGloryONE(captionONE);
neonGloryTWO(captionTWO);
neonGloryTHREE(captionTHREE);
neonGloryFOUR(captionFOUR);
</script>