css代碼實現

標籤：input   demo   ssi   味道   並且   btn   alternate   state   alt   

純 CSS 實現
下面我們探討下，使用純 CSS 的方式能否實現。

hover 偽類實現

使用 hover 偽類，在滑鼠移至上方在按鈕上面時，控制動畫樣式的暫停。

關鍵代碼如下:

<div class="btn stop">stop</div>
<div class="animation"></div>

<style>
.stop:hover ~ .animation {
animation-play-state: paused;
}
</style>
Demo -- 純 CSS 方式實現 CSS 動畫的暫停與播放 (Hover):

 

當然，這個方法不夠智能，如果釋放滑鼠的自由，點擊一下暫停、再點擊一下播放就好了。還有其他方法嗎？

 

checked 偽類實現

之前的文章《談談一些有趣的CSS題目（八）-- 純CSS的導覽列Tab切換方案》也談過，使用 radio 標籤的 checked 偽類，加上 <label for> 實現純 CSS 捕獲點擊事情。

並且利用被點擊的元素可以控制一些 CSS 樣式。實現如下：

<input id="stop" type="radio" name="playAnimation" />
<input id="play" type="radio" name="playAnimation" />

<div class="box">
<label for="stop">
<div class="btn">stop</div>
</label>
<label for="play">
<div class="btn">play</div>
</label>
</div>

<div class="animation"></div>
部分關鍵 CSS 代碼：

.animation {
animation: move 2s linear infinite alternate;
}

#stop:checked ~ .animation {
animation-play-state: paused;
}

#play:checked ~ .animation {
animation-play-state: running;
}
我們希望當 #stop 和 #play 兩個 radio 被點擊時，給 .animation 元素分別賦予 animation-play-state: paused 或是 animation-play-state: running 。而且二者只能生效其一，所以需要給兩個 radio 標籤賦予相同的 name 屬性。

css代碼實現