bootstrap4 按钮默认有个动画效果 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .btn {
 8             display: inline-block;
 9             font-weight: normal;
10             line-height: 1.25;
11             text-align: center;
12             white-space: nowrap;
13             vertical-align: middle;
14             -webkit-user-select: none;
15             -moz-user-select: none;
16             -ms-user-select: none;
17             user-select: none;
18             border: 1px solid transparent;
19             padding: 0.5rem 1rem;
20             font-size: 1rem;
21             border-radius: 0.25rem;
22             -webkit-transition: all 0.5s ease-in-out;
23             -o-transition: all 0.5s ease-in-out;
24             transition: all 0.5s ease-in-out;
25         }
26         .rotat{
27             transform: scale(0);
28         }
29         .rotat2{
30             transform: scale(1);
31         }
32     </style>
33 </head>
34 <body>
35 <form action="">
36     <button class="btn rotat" type="submit">哈哈</button>
37 </form>
38 
39 </body>
40 <script>
41     let btn = document.querySelector('.btn');
42     window.onload = function () {
43         let name = btn.className;
44          name+=' rotat2';
45          btn.className = name;
46     }
47 </script>
48 </html>

预览地址 ：http://sandbox.runjs.cn/show/lhga1inc?

发现bootstrap4 按钮默认有个动画效果，所以研究了一下！！！

posted @ 2017-05-12 18:15  _白马非马  阅读(1546)  评论(0)  编辑  收藏  举报