利用CSS3实现简书中点击“喜欢”时的动画 

 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>

 

posted @ 2018-09-04 20:32  叶子玉  阅读(195)  评论(0)  编辑  收藏  举报