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

huangapple
go评论56阅读模式
英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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; /* 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;
}
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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; /* 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;
}
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 04:30:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76297239.html
  • css
  • css-animations
  • html
  • html5-canvas
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定