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 按钮默认有个动画效果，所以研究了一下！！！