目前正在学习 CSS,这里的任务是:制作菱形按钮,在悬停时改变其方向。我做到了,但是按钮在悬停时会抽搐其文本。有没有可能解决这个问题?目前我卡住了。我试图搜索,但没有找到。
.button {
background: green;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
color: #fff;
transform: skew(-20deg);
transition: 0.2s;
padding: 12px 56px;
}
/* This is my attempt to fix it. It worked. Partially :\ */
.button > .span {
display: block;
transition: 0s;
transform: skew(20deg);
}
.button:hover > .span {
transform: skew(-20deg);
}
.button:hover {
transform: skew(20deg);
}
.button-yellow {
border: 2px solid yellow;
}
<button class="button">
<span class="span">I shouldn't twitch on hover</span>
</button>
将不胜感激任何帮助!
最佳答案
transition
文字倾斜的时间需要匹配transition
按钮偏斜的时间。当我将它们都设置为 0.2s
时,它们按预期相互抵消。
.button {
background: green;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
color: #fff;
transform: skew(-20deg);
transition: 0.2s;
padding: 12px 56px;
}
/* This is my attempt to fix it. It worked. Partially :\ */
.button > .span {
display: block;
transition: 0.2s;
transform: skew(20deg);
}
.button:hover > .span {
transform: skew(-20deg);
}
.button:hover {
transform: skew(20deg);
}
.button-yellow {
border: 2px solid yellow;
}
<button class="button">
<span class="span">I shouldn't twitch on hover</span>
</button>
关于css - 悬停时文本抽搐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61482706/