比如我有这样一个p宽100高100我想点击的是时候让他的展示方式是从中间向两边展开，css3要怎么写
p
100
css3
认证高级PHP讲师
雷雷
作為初學者，看樓主提問帶的標籤裡有JQ，就興致勃勃地寫了一下。其實樓上的CSS3屬性真心很好啊！
<!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>
使用translateX(n)屬性，文件看下面http://www.w3school.com.cn/css3/css3_2dtransform.asp
雷雷
作為初學者，看樓主提問帶的標籤裡有JQ，就興致勃勃地寫了一下。其實樓上的CSS3屬性真心很好啊！
使用translateX(n)屬性，文件看下面
http://www.w3school.com.cn/css3/css3_2dtransform.asp