我用 CSS 做了一個按鈕影片。如果游標懸停在按鈕上，按鈕將縮小，當它不在時，它會增長。但是，當您將滑鼠懸停在按鈕上時，它會在 2 秒后繼續播放影片。你能幫我解決這個問題嗎？
button{
text-decoration: none;
border: none;
padding: 8px 30px;
background-color: green;
color: #fff;
outline: none;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
animation: goForward;
animation-play-state: running;
animation-iteration-count: 1;
animation-duration: 2s;
}
button:hover{
animation: goBack;
animation-play-state: running;
animation-duration: 2s;
animation-iteration-count: 1;
}
@keyframes goBack{
from{transform: scale(1)}
to{transform: scale(0.72)}
}
@keyframes goForward{
from{transform: scale(0.72)}
to{transform: scale(1)}
}
uj5u.com熱心網友回復：
更好更簡單的方法是使用transition比animation.
button {
text-decoration: none;
border: none;
padding: 8px 30px;
background-color: green;
color: #fff;
outline: none;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
transform: scale(1);
transition: transform ease 2s;
}
button:hover {
transform: scale(0.72);
}<button>Click Me</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448389.html
標籤：css
上一篇：調整影像大小時如何隱藏邊框？