英文:
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:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Portifólio João Pedro</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="button">
<button>Botão 1</button>
</div>
<div class="button">
<button>Botão 2</button>
</div>
<div class="button">
<button>Botão 3</button>
</div>
<div class="button">
<button>Botão 4</button>
</div>
</div>
</body>
</html>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: grid;
height: 100%;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 20px;
}
.button {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
transition: transform 0.3s ease-in-out, z-index 0.3s;
}
.button button {
width: 100%;
height: 100%;
}
.container:hover .button:not(:hover) {
transition-delay: 0s !important;
transform: translateX(0);
z-index: 0;
}
.container:hover .button:hover {
transform: scale(1.1);
z-index: 1;
}
.container:hover .button:hover ~ .button {
transition-delay: 0.1s;
transform: translateX(15%);
}
请问还有其他需要帮助的吗？
英文:
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:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Portifólio João Pedro</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="button">
<button>Botão 1</button>
</div>
<div class="button">
<button>Botão 2</button>
</div>
<div class="button">
<button>Botão 3</button>
</div>
<div class="button">
<button>Botão 4</button>
</div>
</div>
</body>
</html>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: grid;
height: 100%;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 20px;
}
.button {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
transition: transform 0.3s ease-in-out, z-index 0.3s;
}
.button button {
width: 100%;
height: 100%;
}
.container:hover .button:not(:hover) {
transition-delay: 0s !important;
transform: translateX(0);
z-index: 0;
}
.container:hover .button:hover {
transform: scale(1.1);
z-index: 1;
}
.container:hover .button:hover ~ .button {
transition-delay: 0.1s;
transform: translateX(15%);
}
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库来构建此结构。这是我为您编写的一个简单示例结构。
<!DOCTYPE html>
<html data-wf-page="60ee32414a2efc10344a2943">
<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">
<title>Portifólio João Pedro</title>
<!-- 在<head>标签中必须使用此jQuery文件 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
.home_topleft {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: auto;
}
.home_topright {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: auto;
right: 0;
}
.home_bottomleft {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: auto;
}
.home_bottomright {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: auto;
right: 0;
}
.button {
color: #141414;
text-transform: uppercase;
font-family: forma-djr-micro, sans-serif;
font-size: 50px;
font-weight: 400;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
<button class="button">Botão 1</button>
</div>
<div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
<button class="button">Botão 2</button>
</div>
<div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
<button class="button">Botão 3</button>
</div>
<div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
<button class="button">Botão 4</button>
</div>
</div>
<!-- 在</body>标签关闭之前使用此jQuery文件 -->
<script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
</body>
</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.
<!DOCTYPE html>
<html data-wf-page="60ee32414a2efc10344a2943"><head>
<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">
<title>Portifólio João Pedro</title>
<!--Must Use this Jquery file in <head> Tag-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
.home_topleft {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: auto;
}
.home_topright {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: auto;
right: 0;
}
.home_bottomleft {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: auto;
}
.home_bottomright {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: auto;
right: 0;
}
.button {
color: #141414;
text-transform: uppercase;
font-family: forma-djr-micro, sans-serif;
font-size: 50px;
font-weight: 400;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
<button class="button">Botão 1</button>
</div><div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
<button class="button">Botão 2</button>
</div><div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
<button class="button">Botão 3</button>
</div><div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
<button class="button">Botão 4</button></div>
</div>
<!-- Use this Jquery file just before close the </body> tag-->
<script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
</body></html>
答案2
得分: 0
以下是您提供的代码的翻译部分：
这里您可以检查我为您编写的新代码
<!DOCTYPE html>
<html data-wf-page="60ee32414a2efc10344a2943">
<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">
<title>Portfólio João Pedro</title>
<!--在<head>标签中必须使用此Jquery文件-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
.home_topleft {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: auto;
}
.home_topright {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: auto;
right: 0;
}
.home_bottomleft {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: auto;
}
.home_bottomright {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: auto;
right: 0;
}
.logo {
z-index: 10;
width: 20%;
height: 20%;
background-color: #6200ff;
border: 1px #000;
justify-content: center;
align-items: center;
padding-bottom: 9px;
display: flex;
position: absolute;
top: 40%;
left: 40%;
}
.button {
color: #141414;
text-transform: uppercase;
font-family: forma-djr-micro, sans-serif;
font-size: 50px;
font-weight: 400;
text-decoration: none;
}
.container {
margin: 48px;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
}
@media screen and (max-width: 991px) {
.home_topleft, .home_topright, .home_bottomleft, .home_bottomright {
width: 100%;
height: 18%;
border-width: 1px;
position: static;
}
.logo {
width: 100%;
height: 28%;
border-width: 1px;
justify-content: center;
align-items: center;
margin-top: 0;
position: static;
}
}
</style>
</head>
<body>
<div class="container">
<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;">
<button class="button">Botão 5</button>
</div>
<div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
<button class="button">Botão 1</button>
</div>
<div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
<button class="button">Botão 2</button>
</div>
<div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
<button class="button">Botão 3</button>
</div>
<div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
<button class="button">Botão 4</button>
</div>
</div>
<!-- 在关闭<body>标签之前使用此Jquery文件 -->
<script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
</body>
</html>
如果您想要离线运行此代码或自行托管，请将JavaScript文件保存在您的设备或托管中（在浏览器中打开HTML页面 -> 右键单击 -> 查看页面源代码 -> 右键单击JavaScript文件 -> 另存为），然后替换路径以指向该文件。
请注意，我只提供了代码的翻译部分，没有包括代码的解释或其他信息。如果您有任何其他疑问或需要进一步的帮助，请随时提出。
英文:
Here you can check I have written a new code for you
<!DOCTYPE html>
<html data-wf-page="60ee32414a2efc10344a2943"><head>
<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">
<title>Portifólio João Pedro</title>
<!--Must Use this Jquery file in <head> Tag-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
.home_topleft {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: auto;
}
.home_topright {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: 0;
bottom: auto;
left: auto;
right: 0;
}
.home_bottomleft {
z-index: 1;
width: 40%;
height: 60%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: auto;
}
.home_bottomright {
z-index: 1;
width: 60%;
height: 40%;
background-color: #fff;
border: 2px solid #000;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: absolute;
top: auto;
bottom: 0;
left: auto;
right: 0;
}
.logo {
z-index: 10;
width: 20%;
height: 20%;
background-color: #6200ff;
border: 1px #000;
justify-content: center;
align-items: center;
padding-bottom: 9px;
display: flex;
position: absolute;
top: 40%;
left: 40%;
}
.button {
color: #141414;
text-transform: uppercase;
font-family: forma-djr-micro, sans-serif;
font-size: 50px;
font-weight: 400;
text-decoration: none;
}
.container {
margin: 48px;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
}
@media screen and (max-width: 991px) {
.home_topleft, .home_topright, .home_bottomleft, .home_bottomright {
width: 100%;
height: 18%;
border-width: 1px;
position: static;
}
.logo {
width: 100%;
height: 28%;
border-width: 1px;
justify-content: center;
align-items: center;
margin-top: 0;
position: static;
} }
</style>
</head>
<body>
<div class="container">
<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;">
<button class="button">Botão 5</button>
</div>
<div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
<button class="button">Botão 1</button>
</div><div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
<button class="button">Botão 2</button>
</div><div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
<button class="button">Botão 3</button>
</div><div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
<button class="button">Botão 4</button></div>
</div>
<!-- Use this Jquery file just before close the "body" tag-->
<script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
</body>
</html>
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论