比如我有这样一个p宽100高100我想点击的是时候让他的展示方式是从中间向两边展开，css3要怎么写
p
100
css3
认证高级PHP讲师
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .outter { position: relative; width: 202px; height: 400px; } .left, .right { position: absolute; top: 0; left: 0; display: inline-block; width: 100px; height: 400px; background-color: #000; } .right { left: inherit; right: 0; } .ani { animation: ani 5s; -moz-animation: ani 5s; /* Firefox */ -webkit-animation: ani 5s; /* Safari 和 Chrome */ -o-animation: ani 5s; } @keyframes ani { from { width: 100px; } to { width: 0; } } </style> </head> <body> <p class="outter"> <p class="left inner"></p> <p class="right inner"></p> </p> <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> <script> $(function() { var inner = $('.inner'); $('.outter').one('click', function() { inner.addClass('ani').on('webkitAnimationEnd', function() { inner.hide(); }); }); }); </script> </body> </html>
As a beginner, I saw JQ in the tag of the poster’s question, so I wrote it with great interest. In fact, the CSS3 properties upstairs are really good!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>两边展开</title> <link rel="stylesheet" href=""> <style> .content { width: 100px; height: 100px; position: relative; overflow: hidden; } .content p { position: absolute; width: 49px; height: 100px; } .left { left: 0; background-color: black; margin-right: 2px; } .right { background-color: black; right: 0; } </style> </head> <body> <p class="content"> <p class="left"></p> <p class="right"></p> </p> <script src="js/jquery-1.12.0.min.js"></script> <script> $(function() { $(".content").click(function() { $(".left").animate({ left: "-49px" }, 1000); $(".right").animate({ right: "-49px" }, 1000) }) }) </script> </body> </html>
Use the translateX(n) attribute, see the document belowhttp://www.w3school.com.cn/css3/css3_2dtransform.asp
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
As a beginner, I saw JQ in the tag of the poster’s question, so I wrote it with great interest. In fact, the CSS3 properties upstairs are really good!
Use the translateX(n) attribute, see the document below
http://www.w3school.com.cn/css3/css3_2dtransform.asp