比如我有这样一个div宽100高100
我想点击的是时候让他的展示方式是从中间向两边展开，css3要怎么写
作为初学者，看楼主提问带的标签里有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 div {
position: absolute;
width: 49px;
height: 100px;
}
.left {
left: 0;
background-color: black;
margin-right: 2px;
}
.right {
background-color: black;
right: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<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>
<!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>
<div class="outter">
<div class="left inner"></div>
<div class="right inner"></div>
</div>
<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>使用translateX(n)属性，文档看下面
http://www.w3school.com.cn/css3/css3_2dtransform.asp