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

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

What's the best way to create non-symmetrical buttons with scaling animations on hover for my portfolio website?

问题

Here's the translated part of your text:

"所以我正在尝试制作这个网站，并将其用作我的作品集，因为我开始找工作了。

我在创建网站方面遇到了一些问题，尤其是我想要创建的动画方面。

基本上，我想要的是这个网站上的动画效果：https://www.milli.agency

我想要的是非对称的按钮，当我将鼠标悬停在它们上面时，它们会变大并将其他按钮推到一边，而不会重叠在自己身上。

我已经做得有点远了，但现在我在模仿这个效果时遇到了一些问题。

以下是我迄今为止的代码:

HTML:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Portifólio João Pedro</title>
  8.         
  9.         <link rel="stylesheet" href="style.css">
  10.     </head>
  11.     <body>
  12.         <div class="container">
  13.             <div class="button">
  14.               <button>Botão 1</button>
  15.             </div>
  16.             <div class="button">
  17.               <button>Botão 2</button>
  18.             </div>
  19.             <div class="button">
  20.               <button>Botão 3</button>
  21.             </div>
  22.             <div class="button">
  23.               <button>Botão 4</button>
  24.             </div>
  25.           </div>
  26.     </body>
  27. </html>

CSS:

  1. body, html {
  2.     height: 100%;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6.   
  7. .container {
  8.     display: grid;
  9.     height: 100%;
  10.     grid-template-columns: repeat(2, 1fr);
  11.     grid-template-rows: repeat(2, 1fr);
  12.     grid-gap: 20px;
  13. }
  14.   
  15. .button {
  16.     flex: 1;
  17.     display: flex;
  18.     align-items: center;
  19.     justify-content: center;
  20.     background-color: #f0f0f0;
  21.     transition: transform 0.3s ease-in-out, z-index 0.3s;
  22. }
  23.   
  24. .button button {
  25.     width: 100%;
  26.     height: 100%;
  27. }
  28.   
  29. .container:hover .button:not(:hover) {
  30.     transition-delay: 0s !important;
  31.     transform: translateX(0);
  32.     z-index: 0;
  33. }
  34.   
  35. .container:hover .button:hover {
  36.     transform: scale(1.1);
  37.     z-index: 1;
  38. }
  39.   
  40. .container:hover .button:hover ~ .button {
  41.     transition-delay: 0.1s;
  42.     transform: translateX(15%);
  43. }

请问还有其他需要帮助的吗？

英文:

So I'm trying to make this website and use it as my portfolio, since I'm starting to get a job.

I'm having some issues with creating the website, more so with the animation that I want to create.

Pretty much what I want to do is this animation on this website: https://www.milli.agency

What I want are buttons that are not symmetrical and when I hover my mouse over them, they get bigger and push the other buttons to the side, without them overlapping with themselves

I got kinda far, but now I having some issues in mimicking this affect.

Here's the code I got so far:

HTML:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3.     &lt;head&gt;
  4.         &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.         &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6.         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.         &lt;title&gt;Portif&#243;lio Jo&#227;o Pedro&lt;/title&gt;
  8.         
  9.         &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  10.     &lt;/head&gt;
  11.     &lt;body&gt;
  12.         &lt;div class=&quot;container&quot;&gt;
  13.             &lt;div class=&quot;button&quot;&gt;
  14.               &lt;button&gt;Bot&#227;o 1&lt;/button&gt;
  15.             &lt;/div&gt;
  16.             &lt;div class=&quot;button&quot;&gt;
  17.               &lt;button&gt;Bot&#227;o 2&lt;/button&gt;
  18.             &lt;/div&gt;
  19.             &lt;div class=&quot;button&quot;&gt;
  20.               &lt;button&gt;Bot&#227;o 3&lt;/button&gt;
  21.             &lt;/div&gt;
  22.             &lt;div class=&quot;button&quot;&gt;
  23.               &lt;button&gt;Bot&#227;o 4&lt;/button&gt;
  24.             &lt;/div&gt;
  25.           &lt;/div&gt;
  26.     &lt;/body&gt;
  27. &lt;/html&gt;

CSS:

  1. body, html {
  2.     height: 100%;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6.   
  7. .container {
  8.     display: grid;
  9.     height: 100%;
  10.     grid-template-columns: repeat(2, 1fr);
  11.     grid-template-rows: repeat(2, 1fr);
  12.     grid-gap: 20px;
  13. }
  14.   
  15. .button {
  16.     flex: 1;
  17.     display: flex;
  18.     align-items: center;
  19.     justify-content: center;
  20.     background-color: #f0f0f0;
  21.     transition: transform 0.3s ease-in-out, z-index 0.3s;
  22. }
  23.   
  24. .button button {
  25.     width: 100%;
  26.     height: 100%;
  27. }
  28.   
  29. .container:hover .button:not(:hover) {
  30.     transition-delay: 0s !important;
  31.     transform: translateX(0);
  32.     z-index: 0;
  33. }
  34.   
  35. .container:hover .button:hover {
  36.     transform: scale(1.1);
  37.     z-index: 1;
  38. }
  39.   
  40. .container:hover .button:hover ~ .button {
  41.     transition-delay: 0.1s;
  42.     transform: translateX(15%);
  43. }

What an I missing, I just starting it out, but tried to look at youtube, websites but haven't found much on the subject.

How can I make this same effect, is it better with JavaScript, continue with CSS, I at a loss right now, can you guys help me?

I tried looking at articles online, youtube, but that's about it.

What I'm looking for is an effect similar to the one I gave an exemple of: https://www.milli.agency

答案1

得分: 0

一切都很好，但您假设此页面仅使用HTML和CSS构建，但您可以看到他们正在使用两个jQuery库来构建此结构。这是我为您编写的一个简单示例结构。

  1. <!DOCTYPE html>
  2. <html data-wf-page="60ee32414a2efc10344a2943">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Portifólio João Pedro</title>
  8.     
  9.     <!-- 在<head>标签中必须使用此jQuery文件 -->
  10.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  11.     
  12.     <style>
  13.       * {
  14.         box-sizing: border-box;
  15.       }
  17.       .home_topleft {
  18.         z-index: 1;
  19.         width: 60%;
  20.         height: 40%;
  21.         background-color: #fff;
  22.         border: 2px solid #000;
  23.         justify-content: center;
  24.         align-items: center;
  25.         text-decoration: none;
  26.         display: flex;
  27.         position: absolute;
  28.         top: 0;
  29.         bottom: auto;
  30.         left: 0;
  31.         right: auto;
  32.       }
  34.       .home_topright {
  35.         z-index: 1;
  36.         width: 40%;
  37.         height: 60%;
  38.         background-color: #fff;
  39.         border: 2px solid #000;
  40.         justify-content: center;
  41.         align-items: center;
  42.         text-decoration: none;
  43.         display: flex;
  44.         position: absolute;
  45.         top: 0;
  46.         bottom: auto;
  47.         left: auto;
  48.         right: 0;
  49.       }
  51.       .home_bottomleft {
  52.         z-index: 1;
  53.         width: 40%;
  54.         height: 60%;
  55.         background-color: #fff;
  56.         border: 2px solid #000;
  57.         justify-content: center;
  58.         align-items: center;
  59.         text-decoration: none;
  60.         display: flex;
  61.         position: absolute;
  62.         top: auto;
  63.         bottom: 0;
  64.         left: 0;
  65.         right: auto;
  66.       }
  68.       .home_bottomright {
  69.         z-index: 1;
  70.         width: 60%;
  71.         height: 40%;
  72.         background-color: #fff;
  73.         border: 2px solid #000;
  74.         justify-content: center;
  75.         align-items: center;
  76.         text-decoration: none;
  77.         display: flex;
  78.         position: absolute;
  79.         top: auto;
  80.         bottom: 0;
  81.         left: auto;
  82.         right: 0;
  83.       }
  85.       .button {
  86.         color: #141414;
  87.         text-transform: uppercase;
  88.         font-family: forma-djr-micro, sans-serif;
  89.         font-size: 50px;
  90.         font-weight: 400;
  91.         text-decoration: none;
  92.       }
  93.     </style>
  94.   </head>
  95.   <body>
  96.     <div class="container">
  97.       <div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
  98.         <button class="button">Botão 1</button>
  99.       </div>
  100.       <div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
  101.         <button class="button">Botão 2</button>
  102.       </div>
  103.       <div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
  104.         <button class="button">Botão 3</button>
  105.       </div>
  106.       <div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
  107.         <button class="button">Botão 4</button>
  108.       </div>
  109.     </div>
  110.     
  111.     <!-- 在</body>标签关闭之前使用此jQuery文件 -->
  112.     <script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
  113.   </body>
  114. </html>
英文:

Everything is fine but you are assuming that this page is only built with HTML & CSS but you can see that they are using two J-query libraries to build this structure. Here is one simple example structure I wrote for you.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html data-wf-page=&quot;60ee32414a2efc10344a2943&quot;&gt;&lt;head&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;title&gt;Portif&#243;lio Jo&#227;o Pedro&lt;/title&gt;
  8. &lt;!--Must Use this Jquery file in &lt;head&gt; Tag--&gt;
  9. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  10. &lt;style&gt;
  11. * {
  12. box-sizing: border-box;
  13. }
  14. .home_topleft {
  15. z-index: 1;
  16. width: 60%;
  17. height: 40%;
  18. background-color: #fff;
  19. border: 2px solid #000;
  20. justify-content: center;
  21. align-items: center;
  22. text-decoration: none;
  23. display: flex;
  24. position: absolute;
  25. top: 0;
  26. bottom: auto;
  27. left: 0;
  28. right: auto;
  29. }
  30. .home_topright {
  31. z-index: 1;
  32. width: 40%;
  33. height: 60%;
  34. background-color: #fff;
  35. border: 2px solid #000;
  36. justify-content: center;
  37. align-items: center;
  38. text-decoration: none;
  39. display: flex;
  40. position: absolute;
  41. top: 0;
  42. bottom: auto;
  43. left: auto;
  44. right: 0;
  45. }
  46. .home_bottomleft {
  47. z-index: 1;
  48. width: 40%;
  49. height: 60%;
  50. background-color: #fff;
  51. border: 2px solid #000;
  52. justify-content: center;
  53. align-items: center;
  54. text-decoration: none;
  55. display: flex;
  56. position: absolute;
  57. top: auto;
  58. bottom: 0;
  59. left: 0;
  60. right: auto;
  61. }
  62. .home_bottomright {
  63. z-index: 1;
  64. width: 60%;
  65. height: 40%;
  66. background-color: #fff;
  67. border: 2px solid #000;
  68. justify-content: center;
  69. align-items: center;
  70. text-decoration: none;
  71. display: flex;
  72. position: absolute;
  73. top: auto;
  74. bottom: 0;
  75. left: auto;
  76. right: 0;
  77. }
  78. .button {
  79. color: #141414;
  80. text-transform: uppercase;
  81. font-family: forma-djr-micro, sans-serif;
  82. font-size: 50px;
  83. font-weight: 400;
  84. text-decoration: none;
  85. }
  86. &lt;/style&gt;
  87. &lt;/head&gt;
  88. &lt;body&gt;
  89. &lt;div class=&quot;container&quot;&gt;
  90. &lt;div data-w-id=&quot;9f559ef3-4e19-84e1-5e56-79b9baf05265&quot; class=&quot;home_topleft&quot;&gt;
  91. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 1&lt;/button&gt;
  92. &lt;/div&gt;&lt;div data-w-id=&quot;880c7618-5f6d-2872-3471-33319b77ef48&quot; class=&quot;home_bottomleft&quot;&gt;
  93. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 2&lt;/button&gt;
  94. &lt;/div&gt;&lt;div data-w-id=&quot;7facf194-1e43-1b25-657e-fe8951eda355&quot; class=&quot;home_bottomright&quot;&gt;
  95. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 3&lt;/button&gt;
  96. &lt;/div&gt;&lt;div data-w-id=&quot;715b8783-f7e3-4501-693f-23e82a031fdf&quot; class=&quot;home_topright&quot;&gt;
  97. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 4&lt;/button&gt;&lt;/div&gt;
  98. &lt;/div&gt;
  99. &lt;!-- Use this Jquery file just before close the &lt;/body&gt; tag--&gt;
  100. &lt;script src=&quot;https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  101. &lt;/body&gt;&lt;/html&gt;

答案2

得分: 0

以下是您提供的代码的翻译部分：

  1. 这里您可以检查我为您编写的新代码
  3. <!DOCTYPE html>
  4. <html data-wf-page="60ee32414a2efc10344a2943">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.   <title>Portfólio João Pedro</title>
  10.   <!--在<head>标签中必须使用此Jquery文件-->
  11.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  12.   
  13.   <style>
  14.     * {
  15.       box-sizing: border-box;
  16.     }
  17.     
  18.     .home_topleft {
  19.       z-index: 1;
  20.       width: 60%;
  21.       height: 40%;
  22.       background-color: #fff;
  23.       border: 2px solid #000;
  24.       justify-content: center;
  25.       align-items: center;
  26.       text-decoration: none;
  27.       display: flex;
  28.       position: absolute;
  29.       top: 0;
  30.       bottom: auto;
  31.       left: 0;
  32.       right: auto;
  33.     }
  34.     
  35.     .home_topright {
  36.       z-index: 1;
  37.       width: 40%;
  38.       height: 60%;
  39.       background-color: #fff;
  40.       border: 2px solid #000;
  41.       justify-content: center;
  42.       align-items: center;
  43.       text-decoration: none;
  44.       display: flex;
  45.       position: absolute;
  46.       top: 0;
  47.       bottom: auto;
  48.       left: auto;
  49.       right: 0;
  50.     }
  51.     
  52.     .home_bottomleft {
  53.       z-index: 1;
  54.       width: 40%;
  55.       height: 60%;
  56.       background-color: #fff;
  57.       border: 2px solid #000;
  58.       justify-content: center;
  59.       align-items: center;
  60.       text-decoration: none;
  61.       display: flex;
  62.       position: absolute;
  63.       top: auto;
  64.       bottom: 0;
  65.       left: 0;
  66.       right: auto;
  67.     }
  68.     
  69.     .home_bottomright {
  70.       z-index: 1;
  71.       width: 60%;
  72.       height: 40%;
  73.       background-color: #fff;
  74.       border: 2px solid #000;
  75.       justify-content: center;
  76.       align-items: center;
  77.       text-decoration: none;
  78.       display: flex;
  79.       position: absolute;
  80.       top: auto;
  81.       bottom: 0;
  82.       left: auto;
  83.       right: 0;
  84.     }
  85.     
  86.     .logo {
  87.       z-index: 10;
  88.       width: 20%;
  89.       height: 20%;
  90.       background-color: #6200ff;
  91.       border: 1px #000;
  92.       justify-content: center;
  93.       align-items: center;
  94.       padding-bottom: 9px;
  95.       display: flex;
  96.       position: absolute;
  97.       top: 40%;
  98.       left: 40%;
  99.     }
  100.     
  101.     .button {
  102.       color: #141414;
  103.       text-transform: uppercase;
  104.       font-family: forma-djr-micro, sans-serif;
  105.       font-size: 50px;
  106.       font-weight: 400;
  107.       text-decoration: none;
  108.     }
  109.     
  110.     .container {
  111.       margin: 48px;
  112.       position: absolute;
  113.       top: 0%;
  114.       bottom: 0%;
  115.       left: 0%;
  116.       right: 0%;
  117.     }
  118.     
  119.     @media screen and (max-width: 991px) {
  120.       .home_topleft, .home_topright, .home_bottomleft, .home_bottomright {
  121.         width: 100%;
  122.         height: 18%;
  123.         border-width: 1px;
  124.         position: static;
  125.       }
  126.     
  127.       .logo {
  128.         width: 100%;
  129.         height: 28%;
  130.         border-width: 1px;
  131.         justify-content: center;
  132.         align-items: center;
  133.         margin-top: 0;
  134.         position: static;
  135.       }
  136.     }
  137.   </style>
  138. </head>
  139. <body>
  140.   <div class="container">
  141.     <div data-w-id="d2f42698-9a2a-e9a1-ebc5-04b930731124" class="logo" style="width: 20%; height: 20%; transform: translate3d(-80%, 60%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
  142.       <button class="button">Botão 5</button>
  143.     </div>
  144.     <div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
  145.       <button class="button">Botão 1</button>
  146.     </div>
  147.     <div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
  148.       <button class="button">Botão 2</button>
  149.     </div>
  150.     <div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
  151.       <button class="button">Botão 3</button>
  152.     </div>
  153.     <div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
  154.       <button class="button">Botão 4</button>
  155.     </div>
  156.   </div>
  157.   <!-- 在关闭<body>标签之前使用此Jquery文件 -->
  158.   <script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
  159. </body>
  160. </html>
  162. 如果您想要离线运行此代码或自行托管，请将JavaScript文件保存在您的设备或托管中（在浏览器中打开HTML页面 -> 右键单击 -> 查看页面源代码 -> 右键单击JavaScript文件 -> 另存为），然后替换路径以指向该文件。

请注意，我只提供了代码的翻译部分，没有包括代码的解释或其他信息。如果您有任何其他疑问或需要进一步的帮助，请随时提出。

英文:

Here you can check I have written a new code for you

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html data-wf-page=&quot;60ee32414a2efc10344a2943&quot;&gt;&lt;head&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;title&gt;Portif&#243;lio Jo&#227;o Pedro&lt;/title&gt;
  8. &lt;!--Must Use this Jquery file in &lt;head&gt; Tag--&gt;
  9. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  10. &lt;style&gt;
  11. * {
  12. box-sizing: border-box;
  13. }
  14. .home_topleft {
  15. z-index: 1;
  16. width: 60%;
  17. height: 40%;
  18. background-color: #fff;
  19. border: 2px solid #000;
  20. justify-content: center;
  21. align-items: center;
  22. text-decoration: none;
  23. display: flex;
  24. position: absolute;
  25. top: 0;
  26. bottom: auto;
  27. left: 0;
  28. right: auto;
  29. }
  30. .home_topright {
  31. z-index: 1;
  32. width: 40%;
  33. height: 60%;
  34. background-color: #fff;
  35. border: 2px solid #000;
  36. justify-content: center;
  37. align-items: center;
  38. text-decoration: none;
  39. display: flex;
  40. position: absolute;
  41. top: 0;
  42. bottom: auto;
  43. left: auto;
  44. right: 0;
  45. }
  46. .home_bottomleft {
  47. z-index: 1;
  48. width: 40%;
  49. height: 60%;
  50. background-color: #fff;
  51. border: 2px solid #000;
  52. justify-content: center;
  53. align-items: center;
  54. text-decoration: none;
  55. display: flex;
  56. position: absolute;
  57. top: auto;
  58. bottom: 0;
  59. left: 0;
  60. right: auto;
  61. }
  62. .home_bottomright {
  63. z-index: 1;
  64. width: 60%;
  65. height: 40%;
  66. background-color: #fff;
  67. border: 2px solid #000;
  68. justify-content: center;
  69. align-items: center;
  70. text-decoration: none;
  71. display: flex;
  72. position: absolute;
  73. top: auto;
  74. bottom: 0;
  75. left: auto;
  76. right: 0;
  77. }
  78. .logo {
  79. z-index: 10;
  80. width: 20%;
  81. height: 20%;
  82. background-color: #6200ff;
  83. border: 1px #000;
  84. justify-content: center;
  85. align-items: center;
  86. padding-bottom: 9px;
  87. display: flex;
  88. position: absolute;
  89. top: 40%;
  90. left: 40%;
  91. }
  92. .button {
  93. color: #141414;
  94. text-transform: uppercase;
  95. font-family: forma-djr-micro, sans-serif;
  96. font-size: 50px;
  97. font-weight: 400;
  98. text-decoration: none;
  99. }
  100. .container {
  101. margin: 48px;
  102. position: absolute;
  103. top: 0%;
  104. bottom: 0%;
  105. left: 0%;
  106. right: 0%;
  107. }
  108. @media screen and (max-width: 991px) {
  109. .home_topleft, .home_topright, .home_bottomleft, .home_bottomright {
  110. width: 100%;
  111. height: 18%;
  112. border-width: 1px;
  113. position: static;
  114. }
  115. .logo {
  116. width: 100%;
  117. height: 28%;
  118. border-width: 1px;
  119. justify-content: center;
  120. align-items: center;
  121. margin-top: 0;
  122. position: static;
  123. } }
  124. &lt;/style&gt;
  125. &lt;/head&gt;
  126. &lt;body&gt;
  127. &lt;div class=&quot;container&quot;&gt;
  128. &lt;div data-w-id=&quot;d2f42698-9a2a-e9a1-ebc5-04b930731124&quot; class=&quot;logo&quot; style=&quot;width: 20%; height: 20%; transform: translate3d(-80%, 60%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;&quot;&gt;
  129. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 5&lt;/button&gt;
  130. &lt;/div&gt;
  131. &lt;div data-w-id=&quot;9f559ef3-4e19-84e1-5e56-79b9baf05265&quot; class=&quot;home_topleft&quot;&gt;
  132. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 1&lt;/button&gt;
  133. &lt;/div&gt;&lt;div data-w-id=&quot;880c7618-5f6d-2872-3471-33319b77ef48&quot; class=&quot;home_bottomleft&quot;&gt;
  134. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 2&lt;/button&gt;
  135. &lt;/div&gt;&lt;div data-w-id=&quot;7facf194-1e43-1b25-657e-fe8951eda355&quot; class=&quot;home_bottomright&quot;&gt;
  136. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 3&lt;/button&gt;
  137. &lt;/div&gt;&lt;div data-w-id=&quot;715b8783-f7e3-4501-693f-23e82a031fdf&quot; class=&quot;home_topright&quot;&gt;
  138. &lt;button class=&quot;button&quot;&gt;Bot&#227;o 4&lt;/button&gt;&lt;/div&gt;
  139. &lt;/div&gt;
  140. &lt;!-- Use this Jquery file just before close the &quot;body&quot; tag--&gt;
  141. &lt;script src=&quot;https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  142. &lt;/body&gt;
  143. &lt;/html&gt;

If you are looking to run this offline or wanna host yourself save the java-script file in your device or hosting (open html page in browser -> rigth-click-> view-page source -> right click on the javascript file -> save link as) and replace the path to point.

huangapple
  • 本文由 发表于 2023年5月30日 09:34:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76361111.html
  • animation
  • css
  • html
  • portfolio
匿名

发表评论

匿名网友

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

确定