每當(dāng)我將鼠標(biāo)懸停在元素上或單擊時(shí)，我都無法嘗試停止和啟動(dòng)動(dòng)畫。這是我的 HTML 元素：<div class='marquee'> <h1>Some Text</h1></div>CSS：.marquee { width: 80%; white-space: nowrap; overflow: hidden; box-sizing: border-box;}.marquee h1 { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite;}@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); }}現(xiàn)在，動(dòng)畫默認(rèn)情況下會永遠(yuǎn)持續(xù)下去。我怎樣才能擁有它，以便每當(dāng)我將鼠標(biāo)懸停在或單擊時(shí)，動(dòng)畫就會相應(yīng)地暫停和恢復(fù)。我假設(shè)在單擊時(shí)暫停/重新啟動(dòng)動(dòng)畫，我需要一個(gè) JavaScript 函數(shù)。任何幫助表示贊賞。h1div
2 回答
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
您可以使用animation-play-state規(guī)則：
.marquee {
width: 80%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee h1 {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
.marquee h1:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div class='marquee'>
<h1>Some Text</h1>
</div>
或者用JS：
function stopAnimation(e){
if (e.target.style.animationPlayState == ""){
e.target.style.animationPlayState = "paused";
} else {
e.target.style.animationPlayState = "";
}
}
.marquee {
width: 80%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee h1 {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div class='marquee'>
<h1 onclick="stopAnimation(event)">Some Text</h1>
</div>
Cats萌萌
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超9個(gè)贊
我建議使用 jquery 來更改動(dòng)畫屬性。
$('.marquee').mouseenter(() => { $(this).css("animation: marquee 15s linear infinite"); } );
$('.marquee').mouseleave(() => { $(this).css("animation: none"); } );- 2 回答
- 0 關(guān)注
- 145 瀏覽
添加回答
舉報(bào)
0/150
提交
取消