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

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

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代码：

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <link rel="stylesheet" href="./styles.css" />
  6.     <title>Hasgu</title>
  7.     <script
  8.       src="https://kit.fontawesome.com/e5e83f9d84.js"
  9.       crossorigin="anonymous"
  10.     ></script>
  11. </head>
  12. <body>
  13.     <nav class="navbar">
  14.         <a href="#"><p class="name">SHOP</p></a>
  15.         <a href="">Home</a>
  16.         <a href="">Products</a>
  17.         <a href="">About</a>
  18.         <a href="">Contact</a>
  19.         <input type="search" class="searchbar" placeholder="Search" required />
  20.         <button type="submit" class="fas fa-search"></button>
  21.     </nav>
  22. </body>

CSS代码：

  1. * {
  2.     margin: 0;
  3. }
  5. .navbar {
  6.     font-family: monospace;
  7.     font-size: 1.3rem;
  8.     padding: 1%;
  9.     background-color: rgb(235, 178, 178);
  10. }
  12. .navbar a {
  13.     margin-left: 1.5%;
  14.     text-decoration: none;
  15.     color: black;
  16.     padding: 0.6%;
  17. }
  19. .navbar a:not(.name):hover {
  20.     animation: none; /* 除了"HASGU"元素外，禁用所有链接的动画 */
  21. }
  23. .searchbar {
  24.     margin-left: 600px;
  25.     padding: 10px;
  26.     text-align: left;
  27.     width: 500px;
  28.     height: 10%;
  29.     color: #fff;
  30.     font-size: 17px;
  31.     border: black;
  32.     font-weight: 500;
  33.     background: black;
  34.     border-radius: 10px;
  35. }
  37. .navbar button {
  38.     height: 10%;
  39.     border-radius: 10px;
  40.     padding: 10px;
  41.     color: white;
  42.     font-size: 17px;
  43.     background: black;
  44.     border: none;
  45.     border-radius: 10px;
  46.     cursor: pointer;
  47. }
  49. .name {
  50.     margin-top: 2px;
  51.     margin-bottom: 0px;
  52.     display: inline-block;
  53.     font-size: 1.2em;
  54.     color: black;
  55.     background-color: rgb(235, 178, 178);
  56.     padding: 0px;
  57.     letter-spacing: 1px;
  58.     font-family: monospace;
  59.     border-right: 5px solid;
  60.     width: 73px;
  61.     white-space: nowrap;
  62.     overflow: hidden;
  63.     animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
  64. }
  66. @keyframes cursor {
  67.     50% {
  68.         border-color: transparent;
  69.     }
  70. }
  72. @keyframes typing {
  73.     from {
  74.         width: 0;
  75.     }
  76. }
英文:

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

  1. * {
  2. margin: 0;
  3. }
  4. .navbar {
  5. font-family: monospace;
  6. font-size: 1.3rem;
  7. padding: 1%;
  8. background-color: rgb(235, 178, 178);
  9. }
  10. .navbar a {
  11. margin-left: 1.5%;
  12. text-decoration: none;
  13. color: black;
  14. padding: 0.6%;
  15. }
  16. .navbar a:not(.name):hover {
  17. animation: none; /* Disable animation for all links except the &quot;HASGU&quot; element */
  18. }
  19. .searchbar {
  20. margin-left: 600px;
  21. padding: 10px;
  22. text-align: left;
  23. width: 500px;
  24. height: 10%;
  25. color: #fff;
  26. font-size: 17px;
  27. border: black;
  28. font-weight: 500;
  29. background: black;
  30. border-radius: 10px;
  31. }
  32. .navbar button {
  33. height: 10%;
  34. border-radius: 10px;
  35. padding: 10px;
  36. color: white;
  37. font-size: 17px;
  38. background: black;
  39. border: none;
  40. border-radius: 10px;
  41. cursor: pointer;
  42. }
  43. .name {
  44. margin-top: 2px;
  45. margin-bottom: 0px;
  46. display: inline-block;
  47. font-size: 1.2em;
  48. color: black;
  49. background-color: rgb(235, 178, 178);
  50. padding: 0px;
  51. letter-spacing: 1px;
  52. font-family: monospace;
  53. border-right: 5px solid;
  54. width: 73px;
  55. white-space: nowrap;
  56. overflow: hidden;
  57. animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
  58. }
  59. @keyframes cursor {
  60. 50% {
  61. border-color: transparent;
  62. }
  63. }
  64. @keyframes typing {
  65. from {
  66. width: 0;
  67. }
  68. }

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

  1. &lt;head&gt;
  2. &lt;meta charset=&quot;UTF-8&quot; /&gt;
  3. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
  4. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  5. &lt;link rel=&quot;stylesheet&quot; href=&quot;./styles.css&quot; /&gt;
  6. &lt;title&gt;Hasgu&lt;/title&gt;
  7. &lt;script
  8. src=&quot;https://kit.fontawesome.com/e5e83f9d84.js&quot;
  9. crossorigin=&quot;anonymous&quot;
  10. &gt;&lt;/script&gt;
  11. &lt;/head&gt;
  12. &lt;body&gt;
  13. &lt;nav class=&quot;navbar&quot;&gt;
  14. &lt;a href=&quot;#&quot;&gt;&lt;p class=&quot;name&quot;&gt;SHOP&lt;/p&gt;&lt;/a&gt;
  15. &lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;
  16. &lt;a href=&quot;&quot;&gt;Products&lt;/a&gt;
  17. &lt;a href=&quot;&quot;&gt;About&lt;/a&gt;
  18. &lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;
  19. &lt;input type=&quot;search&quot; class=&quot;searchbar&quot; placeholder=&quot;Search&quot; required /&gt;
  20. &lt;button type=&quot;submit&quot; class=&quot;fas fa-search&quot;&gt;&lt;/button&gt;
  21. &lt;/nav&gt;
  22. &lt;/body&gt;

<!-- end snippet -->

Someone please help me with this thanks in advance

Please help me through that

答案1

得分: 0

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

  1. <nav class="navbar">
  2.   <div class="wrapper">
  3.     <a href="#"><p class="name">SHOP</p></a>
  4.   </div>
  5.   <a href="">Home</a>
  6.   <a href="">Products</a>
  7.   <a href="">About</a>
  8.   <a href="">Contact</a>
  9.   <input type="search" class="searchbar" placeholder="Search" required />
  10.   <button type="submit" class="fas fa-search"></button>
  11. </nav>
英文:

You can use wrapper for your .name element:

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

<!-- language: lang-css -->

  1. * {
  2. margin: 0;
  3. }
  4. .navbar {
  5. font-family: monospace;
  6. font-size: 1.3rem;
  7. padding: 1%;
  8. background-color: rgb(235, 178, 178);
  9. }
  10. .navbar a {
  11. margin-left: 1.5%;
  12. text-decoration: none;
  13. color: black;
  14. padding: 0.6%;
  15. }
  16. .navbar a:not(.name):hover {
  17. animation: none; /* Disable animation for all links except the &quot;HASGU&quot; element */
  18. }
  19. .searchbar {
  20. margin-left: 600px;
  21. padding: 10px;
  22. text-align: left;
  23. width: 500px;
  24. height: 10%;
  25. color: #fff;
  26. font-size: 17px;
  27. border: black;
  28. font-weight: 500;
  29. background: black;
  30. border-radius: 10px;
  31. }
  32. .navbar button {
  33. height: 10%;
  34. border-radius: 10px;
  35. padding: 10px;
  36. color: white;
  37. font-size: 17px;
  38. background: black;
  39. border: none;
  40. border-radius: 10px;
  41. cursor: pointer;
  42. }
  43. .name {
  44. margin-top: 2px;
  45. margin-bottom: 0px;
  46. display: inline-block;
  47. font-size: 1.2em;
  48. color: black;
  49. background-color: rgb(235, 178, 178);
  50. padding: 0px;
  51. letter-spacing: 1px;
  52. font-family: monospace;
  53. border-right: 5px solid;
  54. width: 100%;
  55. white-space: nowrap;
  56. overflow: hidden;
  57. animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
  58. }
  59. .wrapper {
  60. display: inline-block;
  61. width: 73px;
  62. }
  63. @keyframes cursor {
  64. 50% {
  65. border-color: transparent;
  66. }
  67. }
  68. @keyframes typing {
  69. from {
  70. width: 0;
  71. }
  72. }

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

  1. &lt;nav class=&quot;navbar&quot;&gt;
  2. &lt;div class=&quot;wrapper&quot;&gt;
  3. &lt;a href=&quot;#&quot;&gt;&lt;p class=&quot;name&quot;&gt;SHOP&lt;/p&gt;&lt;/a&gt;
  4. &lt;/div&gt;
  5. &lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;
  6. &lt;a href=&quot;&quot;&gt;Products&lt;/a&gt;
  7. &lt;a href=&quot;&quot;&gt;About&lt;/a&gt;
  8. &lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;
  9. &lt;input type=&quot;search&quot; class=&quot;searchbar&quot; placeholder=&quot;Search&quot; required /&gt;
  10. &lt;button type=&quot;submit&quot; class=&quot;fas fa-search&quot;&gt;&lt;/button&gt;
  11. &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:

确定