2023年5月21日 04:30:59go评论54阅读模式

英文:

how to only give animation to one element in Navbar rest of them no animation using css

问题

在我有一个名为SHOP的段落，它将作为动画从左向右移动，但是除了SHOP之外的每个元素，如HOME, PRODUCTS, ABOUT, CONTACT都是从右向左移动，我想要停止它们移动，除了SHOP。

HTML代码：

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Hasgu</title>
    <script
      src="https://kit.fontawesome.com/e5e83f9d84.js"
      crossorigin="anonymous"
    ></script>
</head>
<body>
    <nav class="navbar">
        <a href="#"><p class="name">SHOP</p></a>
        <a href="">Home</a>
        <a href="">Products</a>
        <a href="">About</a>
        <a href="">Contact</a>
        <input type="search" class="searchbar" placeholder="Search" required />
        <button type="submit" class="fas fa-search"></button>
    </nav>
</body>

CSS代码：

* {
    margin: 0;
}

.navbar {
    font-family: monospace;
    font-size: 1.3rem;
    padding: 1%;
    background-color: rgb(235, 178, 178);
}

.navbar a {
    margin-left: 1.5%;
    text-decoration: none;
    color: black;
    padding: 0.6%;
}

.navbar a:not(.name):hover {
    animation: none; /* 除了"HASGU"元素外，禁用所有链接的动画 */
}

.searchbar {
    margin-left: 600px;
    padding: 10px;
    text-align: left;
    width: 500px;
    height: 10%;
    color: #fff;
    font-size: 17px;
    border: black;
    font-weight: 500;
    background: black;
    border-radius: 10px;
}

.navbar button {
    height: 10%;
    border-radius: 10px;
    padding: 10px;
    color: white;
    font-size: 17px;
    background: black;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.name {
    margin-top: 2px;
    margin-bottom: 0px;
    display: inline-block;
    font-size: 1.2em;
    color: black;
    background-color: rgb(235, 178, 178);
    padding: 0px;
    letter-spacing: 1px;
    font-family: monospace;
    border-right: 5px solid;
    width: 73px;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
}

@keyframes cursor {
    50% {
        border-color: transparent;
    }
}

@keyframes typing {
    from {
        width: 0;
    }
}

英文:

where i have a para called SHOP it will move from left to right as a animation
but with that every element like** HOME,PRODUCTS,ABOUT,CONTACT **everything is moving right to left i want to stop them moving except SHOP
HTML CODE

* {
margin: 0;
}
.navbar {
font-family: monospace;
font-size: 1.3rem;
padding: 1%;
background-color: rgb(235, 178, 178);
}
.navbar a {
margin-left: 1.5%;
text-decoration: none;
color: black;
padding: 0.6%;
}
.navbar a:not(.name):hover {
animation: none; /* Disable animation for all links except the &quot;HASGU&quot; element */
}
.searchbar {
margin-left: 600px;
padding: 10px;
text-align: left;
width: 500px;
height: 10%;
color: #fff;
font-size: 17px;
border: black;
font-weight: 500;
background: black;
border-radius: 10px;
}
.navbar button {
height: 10%;
border-radius: 10px;
padding: 10px;
color: white;
font-size: 17px;
background: black;
border: none;
border-radius: 10px;
cursor: pointer;
}
.name {
margin-top: 2px;
margin-bottom: 0px;
display: inline-block;
font-size: 1.2em;
color: black;
background-color: rgb(235, 178, 178);
padding: 0px;
letter-spacing: 1px;
font-family: monospace;
border-right: 5px solid;
width: 73px;
white-space: nowrap;
overflow: hidden;
animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
}
@keyframes cursor {
50% {
border-color: transparent;
}
}
@keyframes typing {
from {
width: 0;
}
}

&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;./styles.css&quot; /&gt;
&lt;title&gt;Hasgu&lt;/title&gt;
&lt;script
src=&quot;https://kit.fontawesome.com/e5e83f9d84.js&quot;
crossorigin=&quot;anonymous&quot;
&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav class=&quot;navbar&quot;&gt;
&lt;a href=&quot;#&quot;&gt;&lt;p class=&quot;name&quot;&gt;SHOP&lt;/p&gt;&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;Products&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;
&lt;input type=&quot;search&quot; class=&quot;searchbar&quot; placeholder=&quot;Search&quot; required /&gt;
&lt;button type=&quot;submit&quot; class=&quot;fas fa-search&quot;&gt;&lt;/button&gt;
&lt;/nav&gt;
&lt;/body&gt;

Someone please help me with this thanks in advance

Please help me through that

答案1

得分: 0

你可以为你的.name元素使用包装器：

<nav class="navbar">
  <div class="wrapper">
    <a href="#"><p class="name">SHOP</p></a>
  </div>
  <a href="">Home</a>
  <a href="">Products</a>
  <a href="">About</a>
  <a href="">Contact</a>
  <input type="search" class="searchbar" placeholder="Search" required />
  <button type="submit" class="fas fa-search"></button>
</nav>

英文:

You can use wrapper for your .name element:

* {
margin: 0;
}
.navbar {
font-family: monospace;
font-size: 1.3rem;
padding: 1%;
background-color: rgb(235, 178, 178);
}
.navbar a {
margin-left: 1.5%;
text-decoration: none;
color: black;
padding: 0.6%;
}
.navbar a:not(.name):hover {
animation: none; /* Disable animation for all links except the &quot;HASGU&quot; element */
}
.searchbar {
margin-left: 600px;
padding: 10px;
text-align: left;
width: 500px;
height: 10%;
color: #fff;
font-size: 17px;
border: black;
font-weight: 500;
background: black;
border-radius: 10px;
}
.navbar button {
height: 10%;
border-radius: 10px;
padding: 10px;
color: white;
font-size: 17px;
background: black;
border: none;
border-radius: 10px;
cursor: pointer;
}
.name {
margin-top: 2px;
margin-bottom: 0px;
display: inline-block;
font-size: 1.2em;
color: black;
background-color: rgb(235, 178, 178);
padding: 0px;
letter-spacing: 1px;
font-family: monospace;
border-right: 5px solid;
width: 100%;
white-space: nowrap;
overflow: hidden;
animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
}
.wrapper {
display: inline-block;
width: 73px;
}
@keyframes cursor {
50% {
border-color: transparent;
}
}
@keyframes typing {
from {
width: 0;
}
}

&lt;nav class=&quot;navbar&quot;&gt;
&lt;div class=&quot;wrapper&quot;&gt;
&lt;a href=&quot;#&quot;&gt;&lt;p class=&quot;name&quot;&gt;SHOP&lt;/p&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;Products&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;
&lt;input type=&quot;search&quot; class=&quot;searchbar&quot; placeholder=&quot;Search&quot; required /&gt;
&lt;button type=&quot;submit&quot; class=&quot;fas fa-search&quot;&gt;&lt;/button&gt;
&lt;/nav&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何仅对导航栏中的一个元素添加动画，而其余元素不添加动画，使用CSS。

问题

答案1

在获取输出方面存在困难。

如何在我的作品集网站上创建具有悬停缩放动画的非对称按钮的最佳方法？

altText for an input box not work the same way as alt for an image regarding alt values?

点击特定实例以使用 CSS 选择器选择按钮。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论