我正在尝试创建一个主页,其中有 6 个按钮,当用户将光标悬停在它们上时,它们会缩小,并且文本会从每个按钮的中心展开。
我设法得到了这个:
body {
background-color: white;
}
.button-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.image-button {
position: relative;
overflow: hidden;
width: 10vw;
height: 10vw;
background: none;
border: none;
}
.image-button img {
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.image-button:hover img {
transform: scale(0.6);
}
.button-container span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8vh;
transition: font-size 0.3s ease;
opacity: 0;
z-index: 1;
mix-blend-mode: difference;
color: white;
}
.image-button:hover + span {
font-size: 32vh;
opacity: 1;
}
<div class="button-container">
<button class="image-button">
<img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
</button>
<span>text1</span>
<button class="image-button">
<img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
</button>
<span>text2</span>
<button class="image-button">
<img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
</button>
<span>text3</span>
</div>
正如您所看到的,它不是很干净,它有点小故障,并且文本从屏幕中心而不是从按钮中心增长。
我应该改变什么?
快速修复方法是将
pointer-events: none
应用于 <span>
,这样按钮的 hover
状态就不会被取消。
您也可以将更高的
z-index
应用于 .button-container
,但这会稍微改变文本的样式,实际上只是删除 mix-blend-mode: difference;
属性给出的效果。
body {
background-color: white;
}
.button-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.image-button {
position: relative;
overflow: hidden;
width: 10vw;
height: 10vw;
background: none;
border: none;
}
.image-button img {
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.image-button:hover img {
transform: scale(0.6);
}
.button-container span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8vh;
transition: font-size 0.3s ease;
opacity: 0;
z-index: 1;
mix-blend-mode: difference;
color: white;
pointer-events: none;
}
.image-button:hover + span {
font-size: 32vh;
opacity: 1;
}
<div class="button-container">
<button class="image-button">
<img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
</button>
<span>text1</span>
<button class="image-button">
<img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
</button>
<span>text2</span>
<button class="image-button">
<img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
</button>
<span>text3</span>
</div>