我创建了具有悬停效果的按钮。按钮从下到上填充背景颜色为白色，文本颜色发生变化。但是，当动画发生时，底部会出现这条奇怪的线。任何帮助将不胜感激。
.project-button div {
position: relative;
display: inline-block;
padding: 1rem;
margin: 0 1rem 1rem 1rem;
font-size: 1rem;
font-weight: 700;
border: 1px solid white;
border-radius: 15px;
background-repeat: no-repeat;
transition: background-size .5s, color .5s;
}
.to-top {
background-position: 50% 100%;
background-size: 100% 0%;
}
.project-button a {
color: white;
}
.project-button div:hover {
background-size: 100% 100%;
background-image: linear-gradient(white, white);
}
.color-blue:hover {
color: #51d0de;
}
/* Misc */
html {
background: black;
margin: 1em;
}<div class="project-button">
<a href="###"><div class="to-top color-blue">Visit Site</div></a>
</div>最佳答案
尝试以下操作:
我认为问题与 Chrome 计算动画的方式有关。有时(取决于框架)白色背景太小而无法填充显示黑色背景的按钮(因此闪烁)。
.project-button div {
position: relative;
display: inline-block;
padding: 1rem;
margin: 0 1rem 1rem 1rem;
font-size: 1rem;
font-weight: 700;
border: 1px solid white;
border-radius: 15px;
background-image: linear-gradient(white, white);
background-repeat: no-repeat;
background-position: 0 -100%;
background-size: 100% 200%;
transition: background-position .5s, color .5s;
}
.project-button a {
color: white;
}
.project-button div:hover {
background-position: 0% 0%;
}
.color-blue:hover {
color: #51d0de;
}
/* Misc */
html {
background: black;
margin: 1em;
}<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="project-button">
<a href="###"><div class="color-blue">Visit Site</div></a>
</div>
</body>
</html>关于html - 如何使用CSS消除按钮上的动画闪烁？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57963831/