聚合全网技术文章，根据你的阅读喜好进行个性推荐
开源之夏第三届火热来袭，高校学生参与赢万元奖金！>>>
css3 transition width在变长的时候 能以中心为原点，向两边伸长吗？
一般情况都是 从左向右增长
用scale
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <title>hoverSlideout Demo</title> <link rel="stylesheet" type="text/css" href="css/css.css"> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ }); </script> <style type="text/css"> .te{ text-align: center; } .bl{ width: 100px; display: inline-block; transition: 1s all cubic-bezier(.46,1,.23,1.52); border:1px solid #e3e3e3; border-radius: 4px; background-color: #ef5621; padding: 10px 20px; box-sizing: border-box; } .bl.on{ width: 200px; </style> </head> <body> <div class="te"> <div class="bl"></div> </div> <button id="ddddd" type="submit">测试</button> <script type="text/javascript"> $('#ddddd').click(function(){ $('.bl').toggleClass('on'); }) </script> </body> </html>
</html>
用scale
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <title>hoverSlideout Demo</title> <link rel="stylesheet" type="text/css" href="css/css.css"> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ }); </script> <style type="text/css"> .te{ text-align: center; } .bl{ width: 100px; display: inline-block; transition: 1s all cubic-bezier(.46,1,.23,1.52); border:1px solid #e3e3e3; border-radius: 4px; background-color: #ef5621; padding: 10px 20px; box-sizing: border-box; } .bl.on{ width: 200px; </style> </head> <body> <div class="te"> <div class="bl"></div> </div> <button id="ddddd" type="submit">测试</button> <script type="text/javascript"> $('#ddddd').click(function(){ $('.bl').toggleClass('on'); }) </script> </body>
</html>