如何在單擊按鈕時使用 CSS（不是 JS）中的 animation-play-state 屬性暫停/播放舞臺變化影片？我在互聯網上找到的所有東西都是點擊同一個元素或該元素的父元素，而不是兩個單獨的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button class="button" id="start">play/pause</button>
<div id="stage"></div>
</body>
</html>
#stage {
height:300px;
border:1px solid #000;
animation:stage-change 6s 6 forwards;
overflow: hidden;
}
@keyframes stage-change {
0% {
background-color: darkorange ;
}
100% {
background-color: #1c1341;
}
}
uj5u.com熱心網友回復：
如果您用復選框替換按鈕并設定按鈕的樣式，那么您可以實作您的任務：
顯示代碼片段
/* Styling for the button */
.button {
display: inline-block;
padding: 2px 7px;
border: 1px solid #767676;
border-radius: 3px;
box-sizing: border-box;
font: normal 13.3333px sans-serif;
background-color: #efefef;
user-select: none;
}
.button:hover { border-color: #474747; background-color: #e3e3e3; }
.button:active { border-color: #8c8c8c; background-color: #f5f5f5; }
/* Control element */
#start {
position: absolute;
height: 1px; width: 1px;
opacity: 0; pointer-events: none;
}
/* Controllable element */
#stage {
height: 300px; border: 1px solid #000;
animation: stage-change 6s 6 forwards paused;
}
#start:checked #stage { animation-play-state: running; }
/* Animation */
@keyframes stage-change {
0% { background-color: darkorange; }
100% { background-color: #1c1341; }
}<label for="start" class="button">play/pause</label>
<input id="start" type="checkbox">
<div id="stage"></div>可以通過在標記中使用真實按鈕來簡化樣式：
顯示代碼片段
/* Button */
.button { pointer-events: none; }
/* Control element */
#start {
position: absolute;
height: 1px; width: 1px;
opacity: 0; pointer-events: none;
}
/* Controllable element */
#stage {
height: 300px; border: 1px solid #000;
animation: stage-change 6s 6 forwards paused;
}
#start:checked #stage { animation-play-state: running; }
/* Animation */
@keyframes stage-change {
0% { background-color: darkorange; }
100% { background-color: #1c1341; }
}<label for="start"><button class="button">play/pause</button></label>
<input id="start" type="checkbox">
<div id="stage"></div>或者您可以進一步擴展功能 - 按鈕上的標簽將發生變化：
顯示代碼片段
/* Styling for the button */
.button {
display: inline-block;
padding: 2px 7px;
border: 1px solid #767676;
border-radius: 3px;
box-sizing: border-box;
font: normal 13.3333px sans-serif;
background-color: #efefef;
user-select: none;
}
.button:hover { border-color: #474747; background-color: #e3e3e3; }
.button:active { border-color: #8c8c8c; background-color: #f5f5f5; }
.button::before { content: 'play'; }
#start:checked .button::before { content: 'pause'; }
/* Control element */
#start {
position: absolute;
height: 1px; width: 1px;
opacity: 0; pointer-events: none;
}
/* Controllable element */
#stage {
height: 300px; border: 1px solid #000;
animation: stage-change 6s 6 forwards paused;
}
#start:checked label #stage { animation-play-state: running; }
/* Animation */
@keyframes stage-change {
0% { background-color: darkorange; }
100% { background-color: #1c1341; }
}<input id="start" type="checkbox">
<label for="start" class="button"></label>
<div id="stage"></div>uj5u.com熱心網友回復：
您可以使用~來更改更改元素同級的 css 的屬性。
假設您想完全在 css 中完成，您不能真正讓按鈕同時播放和暫停，您可以將 JS 用于單個按鈕。
我在這里使用了 2 個按鈕，一個用于播放，一個用于暫停。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button class="button" id="play">play</button>
<button class="button" id="pause">pause</button>
<div id="stage"></div>
</body>
</html>
CSS
#stage{
height:300px;
border:1px solid #000;
overflow: hidden;
animation: stage-change 6s 6 forwards;
animation-play-state: paused;
}
@keyframes stage-change {
0% {
background-color: darkorange ;
}
100% {
background-color: #1c1341;
}
}
#play:focus ~ #stage{
animation-play-state: running;
}
#pause:focus ~ #stage{
animation-play-state: paused;
}
或者
如果您真的只想使用一個輸入元素來控制影片，則可以使用復選框 hack。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" id="check"> play
<div id="stage"></div>
</body>
</html>
CSS
#stage{
height:300px;
border:1px solid #000;
overflow: hidden;
animation: stage-change 6s 6 forwards;
animation-play-state: paused;
}
@keyframes stage-change {
0% {
background-color: darkorange ;
}
100% {
background-color: #1c1341;
}
}
#play:checked ~ #stage{
animation-play-state: running;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/338344.html