1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Like</title> 8 <style> 9 #like { 10 background: #EA6F5A; 11 color: #fff; 12 padding: 13px 0 15px 0; 13 font-size: 19px; 14 border: 1px solid #EA6F5A; 15 border-radius: 40px; 16 width: 100px; 17 position: relative; 18 padding-left: 20px; 19 cursor: pointer; 20 text-align: center; 21 } 22 .like::before { 23 content: ''; 24 position: absolute; 25 left: 5px; 26 top: 2px; 27 width: 50px; 28 height: 50px; 29 background-image: url(https://cdn2.jianshu.io/assets/web/like_animation_steps-62a00a7b52377d3069927cdb8e61fd34.png); 30 background-position: left; 31 background-repeat: no-repeat; 32 background-size: 1000px 50px; 33 background-position: right; 34 animation: like 0.6s 1 steps(19); 35 } 36 @keyframes like{ 37 0% { 38 background-position: left; 39 } 40 100% { 41 background-position: right; 42 } 43 } 44 </style> 45 </head> 46 <body> 47 <div class="like" onclick="like()" id="like">喜欢</div> 48 49 <script> 50 function like() { 51 let like = document.querySelector('#like'); 52 console.log(like.classList); 53 if (like.classList.length == 0) { 54 like.className = 'like'; 55 } else { 56 like.className = ''; 57 } 58 } 59 </script> 60 </body> 61 </html>