jquery-animate 相关问题

绕 x 轴旋转图像

我需要绕其 x 轴（或 y 轴）旋转图像。我可以使用 avisynth 轻松创建这样的动画，但现在我需要使用 Python 的 moviepy 模块来实现该效果。我可以轻松旋转...

需要帮助创建动画以在JS中随机更改文本字符

我需要在菜单中制作像这个网站上的动画： 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>&lt;script&gt; document.addEventListener(&#39;DOMContentLoaded&#39;, function() { var titles = [ &#39;Text1&#39;, &#39;Text12&#39;, &#39;Text3&#39; ]; var currentIndex = 0; function changeTitle() { // Select the _H1 element var element = document.querySelector(&#39;._H1&#39;); if (element) { // Split the current title into characters and wrap each character in a span var chars = element.textContent.split(&#39;&#39;); element.innerHTML = chars.map(char =&gt; `&lt;span&gt;${char}&lt;/span&gt;`).join(&#39;&#39;); // Function to change a character to a random one function changeChar(index) { if (index &lt; chars.length) { var randomChar = String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33); chars[index] = `&lt;span class=&#34;animate&#34;&gt;${randomChar}&lt;/span&gt;`; element.innerHTML = chars.join(&#39;&#39;); setTimeout(() =&gt; changeChar(index + 1), 20); // Adjust the delay as needed } else { // After all characters have changed, change the text to the next title setTimeout(() =&gt; { 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(&#39;DOMContentLoaded&#39;, e =&gt; { document.querySelectorAll(&#39;.animated&#39;).forEach(elm =&gt; animateText(elm)); }); function animateText(element, interval) { if (element.initialtext) { element.count++; let randomStr = Object.keys(element.initialtext) .map(i =&gt; String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33)).join(&#39;&#39;); element.animatedStr = Object.keys(element.initialtext) .map(i =&gt; (element.animatedStr[i] == element.initialtext[i]) ? element.animatedStr[i] : randomStr[i]).join(&#39;&#39;); element.textContent = (element.count &lt; max_count) ? element.animatedStr : element.initialtext; if (element.textContent != element.initialtext) { setTimeout(() =&gt; {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 =&gt; &#39; &#39;).join(&#39;&#39;); element.innerHTML = &#39;&#39;; animateText(element); } }</code></pre> <pre><code>&lt;h1 class=&#34;animated&#34;&gt;Some title&lt;/h1&gt; &lt;h1&gt;&lt;span class=&#34;animated&#34;&gt;Some&lt;/span&gt; &lt;span class=&#34;animated&#34;&gt;title&lt;/span&gt;&lt;/h1&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

显示和隐藏类（onClick）

上传我在按钮上使用 Bootstrap 3 中的字形图标，该按钮使用 CSS3 关键帧旋转，我想要（.隐藏）此类，直到单击按钮，然后它将出现/显示，然后旋转。 ..

在纯 JavaScript 中垂直滚动时水平移动元素

我想在图像出现后立即将其从屏幕的最左侧移动，并且在滚动时，它应该移动到屏幕的右侧。我需要用纯 JavaScript 来实现这一点，或者......

如何Lottie动画SVG

我是lottie文件的新手，我已经在视频的After Effects中创建了动画，我认为这就是我将使用的方法，从illustrator到After Effects，或者figma到After Effects。 我正在尝试...

如何在 CSS 和 jQuery 中重新设置 div 动画

我正在制作这个演示。为什么我无法在单击后重新设置动画？ CSS 规则和 jQuery 仅适用于首次点击。 我正在制作这个演示。为什么我无法在单击后重新设置动画？ CSS 规则和 jQuery 仅适用于首次点击。 <div class="animatetop"></div> <button id="clicker">Click Me</button> .animatetop { height:250px; width:250px; background-color:#FFCC33 } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); animation-delay:2s; } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); animation-delay:2s; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); animation-delay:2s; } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-delay:2s; } $(document).ready(function () { $("#clicker").on("click", function () { // alert( "man nemidanam" ); $('.animatetop').addClass('animated fadeInUp'); }); }); 您只能向对象添加类一次。一旦存在，再次添加它就没有任何作用。动画完成后，您必须删除这些类 animated fadeInUp。 一种方法是使用 setTimeout(): $(document).ready(function () { $("#clicker").on("click", function () { // alert( "man nemidanam" ); $('.animatetop').addClass('animated fadeInUp'); setTimeout(function(){ $('.animatetop').removeClass('animated fadeInUp'); }, 1500); }); }); JSFiddle 在这种情况下，您可以使用 queue() 和 deque() 添加和删除您的类： $(document).ready(function () { $("#clicker").on("click", function () { // alert( "man nemidanam" ); $('.animatetop').addClass('animated fadeInUp').delay(500).queue(function () { $(this).removeClass("animated fadeInUp"); $(this).dequeue(); }); }) }); 更新了小提琴

隐藏和显示右侧边栏[关闭]

所以，我正在尝试创建一个 JavaScript 或查询来隐藏右侧边栏 div。事实证明这比我预期的要困难得多，但我已经很接近了。 我创建了一个隐藏/显示右侧边栏，当

使用 jQuery 动画 addClass/removeClass

我正在使用 jQuery 和 jQuery-ui，想要为各种对象上的各种属性设置动画。 为了在这里解释这个问题，我将其简化为一个 div，当用户移动时该 div 会从蓝色变为红色......

控制动画徽标帧的最佳库方法是什么？

所以我正在为一个霓虹灯名称的网站制作一个动画徽标。我希望它一开始，字母一次打开一个，一个字母振动，然后有帧的某些部分我......

如何在jQuery中延迟执行回调函数

我有两个函数在元素及其子元素上触发动画（用于不透明度和顶部），第二个是第一个的回调函数。 他们之间有 5 秒的停顿，我

带有匹配媒体的 jQuery 媒体查询

我正在尝试根据屏幕分辨率更改我的 jQuery 代码。我正在对主要内容区域进行动画处理，并且想在不同的屏幕尺寸上更改其宽度。 经过网上大量搜索...

Jquery 按类制作动画，但通过每个 div 的单独数据属性动态设置距离

我需要能够通过回调函数将一系列动画链接在一起，以便它们一个接一个地精确执行。然而，其中一些动画会影响

jQuery/CSS不同颜色的半圆进度条

我是 jQuery 和 CSS3 的新手。我需要下面的 HTML 看起来像这样： 请帮我。 </script...</desc> <question vote="0"> <p>我是 jQuery 和 CSS3 的新手。我需要以下 HTML 看起来像这样：</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzVjb05lLnBuZw==" alt="here"/></p> <p>请帮助我。</p> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;div class=&#34;progress&#34;&gt; &lt;div class=&#34;barOverflow&#34;&gt; &lt;div class=&#34;bar&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;span&gt;10&lt;/span&gt;% &lt;/div&gt; &lt;div class=&#34;progress&#34;&gt; &lt;div class=&#34;barOverflow&#34;&gt; &lt;div class=&#34;bar&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;span&gt;100&lt;/span&gt;% &lt;/div&gt; &lt;div class=&#34;progress&#34;&gt; &lt;div class=&#34;barOverflow&#34;&gt; &lt;div class=&#34;bar&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;span&gt;34&lt;/span&gt;% &lt;/div&gt; &lt;div class=&#34;progress&#34;&gt; &lt;div class=&#34;barOverflow&#34;&gt; &lt;div class=&#34;bar&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;span&gt;67&lt;/span&gt;% &lt;/div&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>就是这里，</p> <p>我实际上没有得到你的问题，但这是我想出的，你可以相应地进行更改。</p> <p><strong>HTML</strong></p> <pre><code>&lt;div class=&#34;circle&#34;&gt;&lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.circle { background: transparent; width: 120px; height: 120px; border: 12px solid; border-top-color: blue; border-right-color: red; border-bottom-color: green; border-left-color: yellow; border-radius: 50%; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(359deg) } } </code></pre> <p>请添加动画、变换等属性的供应商前缀。</p> <p>希望有帮助！</p> </answer> </body></html>

.用曲线制作动画

先看一下： 猫需要沿曲线移动到 x 处。 （见箭头） 当猫击中 x 时，它应该停留 10 秒，之后猫应该回到 o，再次呈曲线状，然后

如何将窗口向下滚动时所有元素设置到左侧？

.be-ready-list {边距：0px -24px;} .be-ready-section{背景颜色：#eeeff3;填充：80px 0px 24px;} .be-ready-section.complete-be-ready{背景颜色:#222222;} .准备好-

动画 Alpha ImageView 淡入淡出

在视图模型的observe方法中，一个新的Observer正在监听正常工作的API响应。然而，根据响应，它正在调用以下方法来显示成功......

使用 CSS 在导航栏上滑动（动画）背景图像位置

我在这个论坛的其他地方找到了这段代码，想知道如何使用导航栏获得相同的效果。 所以我会有 7 个文本链接，当你将鼠标悬停在其中一个上时，图像...

如何修复主页主菜单上损坏的滚动到 ID？

我已经接手维护一个网站的任务。不幸的是，之前的维护者安装了很多 WordPress 插件，所以我很难弄清楚哪个插件实际用于...

向下滚动时慢慢隐藏横幅，然后滚动回到页面顶部

我试图在向下滚动时慢慢隐藏横幅（在固定元素内），然后当用户滚动回页面顶部时，将横幅带回来。我正在使用 jQuery。 我试过使用： 一个...

为此 JQuery animate(scrollLeft) 函数获取等效的原生 JavaScript？

我正在为本机（香草）JavaScript 寻找以下 jQuery animate() 函数： $(文档).ready(函数(){ $('#btn-菜单-导航-</desc> <question vote="0"> <p>我正在为本机（香草）JavaScript 寻找以下 jQuery <pre><code>animate()</code></pre> 函数：</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready( function() { $(&#39;#btn-menu-nav-previous&#39;).click(function() { $(&#34;.menu-inner-box&#34;).animate({scrollLeft: &#34;-=100px&#34;}); }); $(&#39;#btn-menu-nav-next&#39;).click(function() { $(&#34;.menu-inner-box&#34;).animate({scrollLeft: &#34;+=100px&#34;}); }); }); &lt;/script&gt; </code></pre> <p>此代码通常允许在单击 <strong>next</strong> 和 <strong>previous</strong> 时对菜单列表进行分页。</p> <p>但是我在不使用 JQuery 的情况下在纯 JS 中搜索它的等价物。</p> <p>这是我所做的：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var menu = document.querySelector(&#34;.menu-inner-box&#34;); var prev = document.getElementById(&#34;btn-menu-nav-previous&#34;); var next = document.getElementById(&#34;btn-menu-nav-next&#34;); prev.addEventListener(&#34;click&#34;, function() { menu.animate([{ scrollLeft: menu.scrollLeft }, { scrollLeft: menu.scrollLeft - 100 }], { duration: 500, fill: &#34;forwards&#34; }); }); next.addEventListener(&#34;click&#34;, function() { menu.animate([{ scrollLeft: menu.scrollLeft }, { scrollLeft: menu.scrollLeft + 100 }], { duration: 500, fill: &#34;forwards&#34; }); }); });</code></pre> <pre><code>nav#menu-container { background: #586e75; position: relative; width: 50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding: 0; margin: 0; list-style-type: none; display: block; text-align: center; } .menu-item { height: 100%; padding: 0px 25px; color: #fff; display: inline; margin: 0 auto; line-height: 57px; text-decoration: none; text-align: center; white-space: no-wrap; } .menu-item:hover { text-decoration: underline; } .last-item { margin-right: 50px; }</code></pre> <pre><code>&lt;nav id=&#34;menu-container&#34; class=&#34;arrow&#34;&gt; &lt;div id=&#34;btn-menu-nav-previous&#34; style=&#34;fill: #FFF&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&#34;btn-menu-nav-next&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class=&#34;menu-inner-box&#34;&gt; &lt;div class=&#34;menu&#34;&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 1&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 2&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 3&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 4&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 5&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 6&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 7&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 8&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 9&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 10&lt;/a&gt; &lt;a class=&#34;menu-item last-item&#34; href=&#34;#&#34;&gt;Menu 11&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt;</code></pre> </div> </div> <p></p> <p>但是根本不管用</p> <p>任何人都可以给我任何帮助吗？？？</p> </question> <answer tick="false" vote="0"> <p>这是我所做的：</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt; &lt;title&gt;Menu&lt;/title&gt; &lt;style&gt; nav#menu-container { background:#586e75; position:relative; width:50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding:0; margin: 0; list-style-type: none; display:block; text-align: center; } .menu-item { height:100%; padding: 0px 25px; color:#fff; display:inline; margin:0 auto; line-height:57px; text-decoration:none; text-align:center; white-space:no-wrap; } .menu-item:hover { text-decoration:underline; } .last-item{ margin-right: 50px; } &lt;/style&gt; &lt;/head&gt; &lt;body class=&#34;hold-transition sidebar-mini layout-fixed&#34;&gt; &lt;nav id=&#34;menu-container&#34; class=&#34;arrow&#34;&gt; &lt;div id=&#34;btn-menu-nav-previous&#34; style=&#34;fill: #FFF&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&#34;btn-menu-nav-next&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class=&#34;menu-inner-box&#34;&gt; &lt;div class=&#34;menu&#34;&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 1&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 2&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 3&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 4&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 5&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 6&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 7&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 8&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 9&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 10&lt;/a&gt; &lt;a class=&#34;menu-item last-item&#34; href=&#34;#&#34;&gt;Menu 11&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; &lt;!-- EXAMPLE 1: --&gt; &lt;script type=&#34;text/javascript&#34;&gt; document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var menu = document.querySelector(&#34;.menu-inner-box&#34;); var prev = document.getElementById(&#34;btn-menu-nav-previous&#34;); var next = document.getElementById(&#34;btn-menu-nav-next&#34;); prev.addEventListener(&#34;click&#34;, function() { menu.animate([{scrollLeft: menu.scrollLeft}, {scrollLeft: menu.scrollLeft - 100}], {duration: 500, fill: &#34;forwards&#34;}); }); next.addEventListener(&#34;click&#34;, function() { menu.animate([{scrollLeft: menu.scrollLeft}, {scrollLeft: menu.scrollLeft + 100}], {duration: 500, fill: &#34;forwards&#34;}); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>但是根本不管用</p> </answer> <answer tick="false" vote="0"> <p>一个简单的替代方法是使用本机<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy" rel="nofollow noreferrer"><pre><code>scrollBy()</code></pre></a>方法。</p> <p>我支持平滑滚动的<pre><code>behavior</code></pre>参数：</p> <pre><code>el.scrollBy({ top: 100, left: 100, behavior: &#39;smooth&#39; }); </code></pre> <p>缺点：你不能改变过渡速度。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var menu = document.querySelector(&#34;.menu-inner-box&#34;); var prev = document.getElementById(&#34;btn-menu-nav-previous&#34;); var next = document.getElementById(&#34;btn-menu-nav-next&#34;); prev.addEventListener(&#34;click&#34;, function() { menu.scrollBy({ left: -100, behavior: &#39;smooth&#39; }); }); next.addEventListener(&#34;click&#34;, function() { menu.scrollBy({ left: 100, behavior: &#39;smooth&#39; }); }); });</code></pre> <pre><code>nav#menu-container { background: #586e75; position: relative; width: 50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding: 0; margin: 0; list-style-type: none; display: block; text-align: center; } .menu-item { height: 100%; padding: 0px 25px; color: #fff; display: inline; margin: 0 auto; line-height: 57px; text-decoration: none; text-align: center; white-space: no-wrap; } .menu-item:hover { text-decoration: underline; } .last-item { margin-right: 50px; }</code></pre> <pre><code>&lt;nav id=&#34;menu-container&#34; class=&#34;arrow&#34;&gt; &lt;div id=&#34;btn-menu-nav-previous&#34; style=&#34;fill: #FFF&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&#34;btn-menu-nav-next&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;32&#34; height=&#34;32&#34; viewBox=&#34;0 0 24 24&#34;&gt; &lt;path d=&#34;M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z&#34; /&gt; &lt;path d=&#34;M0 0h24v24H0z&#34; fill=&#34;none&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class=&#34;menu-inner-box&#34;&gt; &lt;div class=&#34;menu&#34;&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 1&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 2&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 3&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 4&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 5&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 6&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 7&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 8&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 9&lt;/a&gt; &lt;a class=&#34;menu-item&#34; href=&#34;#&#34;&gt;Menu 10&lt;/a&gt; &lt;a class=&#34;menu-item last-item&#34; href=&#34;#&#34;&gt;Menu 11&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>