任何人都可以帮助我理解为什么我的 CSS 样式没有正确应用于输入?
我需要使用 CSS 样式实现平滑过渡,但由于某种原因,它们没有被正确应用。
<input type="submit" value="Submit" />
input[type="submit"] {
background: #fff;
color: #4741d7;
border: 2px solid #4741d7;
padding: 16px 20px;
border-radius: 3px;
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
font-size: large;
letter-spacing: 12px;
}
input[type="submit"]:hover {
color: #fff;
}
input[type="submit"]::after {
content: "";
background-color: #4741d7;
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0) rotate(-180deg);
transition: all 0.3s ease;
}
input[type="submit"]:hover::after {
transition: all 0.3s ease-out;
transform: scale(1, 1) rotate(0deg);
}
将
transition: all 0.3s ease
添加到 input[type="submit"]
并将其从 input[type="submit"]::after
和 input[type="submit"]:hover::after
中删除