<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>c3播放暂停</title> <style type="text/css"> .animation{ 100px; height: 100px; margin: 50px auto; background: deeppink; animation: move 2s linear infinite alternate; } input{ display: none; } @keyframes move{ 0%{ transform: translate(-100px,0); } 100%{ transform: translate(100px,0); } } .btn{ 50px; margin: 10px auto; text-align: center; border: 1px solid #ddd; padding: 10px; border-radius: 5px; cursor: pointer; } .btn:hover { background: #ddd; color: #333; } .btn:active { background: #aaa; color: #dff; } .stop:hover ~ .animation{ animation-play-state: paused; } </style> </head> <body> <div class="stop btn">stop</div> <div class="animation"></div> </body> </html>