我有四个按钮，每当我点击某个按钮时，它应该将背景颜色滑出到特定按钮
.active{
color:white;
background-color:blue;
}
button{
background-color:dodgerblue;
color:white;
box-shadow:none;
border:1px solid transparent;
}<html>
<head>
</head>
<body>
<button class="active">Avon</utton>
<button>Biseri</button>
<button>Poliadal</button>
<button>Aqualitical</button>
</body>
</html>最佳答案
您可以使用 -webkit-transition
function myFunction(e) {
if (document.querySelector('#navList a.active') !== null) {
document.querySelector('#navList a.active').classList.remove('active');
}
e.target.className = "active";
}.active {
color: pink;
background-color: beige;
box-shadow: inset 0 -3.25em 0 0 beige;
}
button {
background-color: aqua;
color: white;
border: 1px solid transparent;
box-shadow: inset 0 0 0 0 #D80286;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
padding: 18px 36px;
}<html>
<head>
</head>
<body>
<div onclick="myFunction(event)">
<button>Avon</button>
<button>Biseri</button>
<button>Poliadal</button>
<button>Aqualitical</button>
</div>
</body>
</html>关于html - 我想要一些按钮上的滑出效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57430336/