av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

純CSS方式實現(xiàn)CSS動畫的暫停與播放！

使用純 CSS 的方法，能否暫停、播放 CSS 動畫?看起來不可能，至少很麻煩。

我們知道，在 CSS3 animation 中，有這樣一個屬性可以暫停、播放動畫：

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.     animation-play-state: paused | running; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. } 
    6.

 

animation-play-state: 屬性定義一個動畫是否運行或者暫停?？梢酝ㄟ^查詢它來確定動畫是否正在運行。另外，它的值可以被設置為暫停和恢復的動畫的重放。

如果借助 Javascript，我們可以實現(xiàn)控制 CSS 動畫的運行和播放，下面列出部分關鍵代碼：

 
 
 
 
    
  
  
  
  
  1. stop
 
  •  
    •  
  •  
  •  

    •  

     
 
 
 
      
  
  
  
  
    1. document.querySelector('.btn').addEventListener('click', function() { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     let btn = document.querySelector('.btn'); 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.     let elem = document.querySelector('.animation'); 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     let state = elem.style['animationPlayState']; 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.      
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.     if(state === 'paused') { 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.         elem.style['animationPlayState'] = 'running'; 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.         btn.innerText = 'stop'; 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.     } else { 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.         elem.style['animationPlayState'] = 'paused'; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.         btn.innerText = 'play'; 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.     } 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.      
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27. }); 
      28.

     

    Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)

    純 CSS 實現(xiàn)

    下面我們探討下，使用純 CSS 的方式能否實現(xiàn)。

    hover 偽類實現(xiàn)

    使用 hover 偽類，在鼠標懸停在按鈕上面時，控制動畫樣式的暫停。

    關鍵代碼如下:

     
 
 
 
      
  
  
  
  
    1. stop
     
  •  
    •  
  •  
  •  

    •  

    Demo — 純 CSS 方式實現(xiàn) CSS 動畫的暫停與播放 (Hover):(https://codepen.io/Chokcoco/pen/PpxKBX)

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

    checked 偽類實現(xiàn)

    之前的文章《有趣的 CSS 題目(8)：純CSS的導航欄Tab切換方案》也談過，使用 radio 標簽的 checked 偽類，加上 實現(xiàn)純 CSS 捕獲點擊事情。

    并且利用被點擊的元素可以控制一些 CSS 樣式。實現(xiàn)如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.         stop
     
  •  
  •      
  •  
  •      
  •  
  •         play 
  •  
  •      
  •  
  •  
  •  
  •  

    •  

    部分關鍵 CSS 代碼：

     
 
 
 
      
  
  
  
  
    1. .animation { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     animation: move 2s linear infinite alternate; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. } 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.   
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. #stop:checked ~ .animation { 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.     animation-play-state: paused; 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17. #play:checked ~ .animation { 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.     animation-play-state: running; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21. } 
      22.

     

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

    DEMO — 純 CSS 方式實現(xiàn) CSS 動畫的暫停與播放：(https://codepen.io/Chokcoco/pen/QpJwBW)

    上面的示例 Demo 中，實現(xiàn)了純 CSS 方式實現(xiàn) CSS 動畫的暫停與播放。

    當然，還有一些其他方法，例如 radio 替換成 checkbox ，或者使用 :target 偽類選擇器也能實現(xiàn)上面同樣的效果，感興趣的可以嘗試一下。

    到此本文結束，如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

    開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什么說什么，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節(jié)。

    解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

    不斷更新，不斷更新，不斷更新，重要的事情說三遍。


    當前標題：純CSS方式實現(xiàn)CSS動畫的暫停與播放！
    文章轉載：http://uogjgqi.cn/article/dhegpjp.html
    掃二維碼與項目經理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網交流

    其他資訊