css3 transition width在变长的时候 能以中心为原点,向两边伸长吗

奥巴码侬 发布于 2016/06/15 11:31
阅读 753
收藏 0

css3 transition width在变长的时候 能以中心为原点,向两边伸长吗?

一般情况都是 从左向右增长

加载中
0
月_霜影
<!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>




返回顶部
顶部