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

英文:

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

Websocket握手失败 404（golang服务器）

如何将HTML数据移动到Golang中的结构体中

鼠标悬停时宽度从0过渡到自动

Advice for editing multiple HTML/Markdown pages together. Any tools for editing multiple pages as a table?

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 在上下文菜单中以大文本形式打开

发表评论