animation 相关问题

我需要在菜单中制作像这个网站上的动画： https://displaay.net/typefaces/retail/ 有现成的解决方案吗？我尝试过与副驾驶一起做，但没有成功。 </desc> <question vote="0"> <p>我需要在菜单中制作像该网站上那样的动画： <a href="https://displaay.net/typefaces/retail/" rel="nofollow noreferrer">https://displaay.net/typefaces/retail/</a></p> <p>有现成的解决方案吗？我尝试过与副驾驶一起完成，但没有成功。</p> <pre><code><script> document.addEventListener('DOMContentLoaded', function() { var titles = [ 'Text1', 'Text12', 'Text3' ]; var currentIndex = 0; function changeTitle() { // Select the _H1 element var element = document.querySelector('._H1'); if (element) { // Split the current title into characters and wrap each character in a span var chars = element.textContent.split(''); element.innerHTML = chars.map(char => `<span>${char}</span>`).join(''); // Function to change a character to a random one function changeChar(index) { if (index < chars.length) { var randomChar = String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33); chars[index] = `<span class="animate">${randomChar}</span>`; element.innerHTML = chars.join(''); setTimeout(() => changeChar(index + 1), 20); // Adjust the delay as needed } else { // After all characters have changed, change the text to the next title setTimeout(() => { element.innerHTML = titles[currentIndex]; currentIndex = (currentIndex + 1) % titles.length; // Loop through the titles }, 2000); // Wait for 2 seconds before changing the text } } // Start changing the characters changeChar(0); } } // Change the title immediately and then every 5 seconds changeTitle(); setInterval(changeTitle, 5000); // 5000 milliseconds = 5 seconds }); </code></pre> </question> <answer tick="false" vote="0"> <p>受到您初始代码的启发，我做了以下操作。它创建一个随机字符串，只要该字符不正确，它就会继续使用另一个随机字符。直到整个字符串正确或者已经过了 100 个“回合”。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const max_count = 100; const interval_ms = 30; document.addEventListener('DOMContentLoaded', e => { document.querySelectorAll('.animated').forEach(elm => animateText(elm)); }); function animateText(element, interval) { if (element.initialtext) { element.count++; let randomStr = Object.keys(element.initialtext) .map(i => String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33)).join(''); element.animatedStr = Object.keys(element.initialtext) .map(i => (element.animatedStr[i] == element.initialtext[i]) ? element.animatedStr[i] : randomStr[i]).join(''); element.textContent = (element.count < max_count) ? element.animatedStr : element.initialtext; if (element.textContent != element.initialtext) { setTimeout(() => {animateText(element)}, interval_ms); } else { delete element.count; delete element.initialtext; delete element.animatedStr; } } else { element.count = 0; element.initialtext = element.textContent; element.animatedStr = Object.keys(element.initialtext).map(i => ' ').join(''); element.innerHTML = ''; animateText(element); } }</code></pre> <pre><code><h1 class="animated">Some title</h1> <h1><span class="animated">Some</span> <span class="animated">title</span></h1></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript animation text jquery-animate

回答 0 投票 0

CABasicAnimation 在完成 1 个周期后回到其原始位置

不要指CABasicAnimation在下一个动画之前返回到原始位置和Objective-C - CABasicAnimation在动画之后应用更改？并且 CABasicAnimation 旋转返回到

ios objective-c animation cabasicanimation

回答 2 投票 0

CSS 动画时间比例不正确

我正在尝试执行下面的动画，该动画基本上包括升起锁，使其旋转，然后下降。我希望这件事能按比例完成。然而，即使使用了很多

css animation rotation transform

回答 1 投票 0

垂直溢出问题

我的打字机动画有问题。当文本到达宽度末尾时，溢出继续向右，我希望它继续在下面。在此输入图像描述这...