首页
开源项目
问答
动弹 博客 翻译 资讯
专题
活动 招聘 码云特惠
2
回答
 css3 transition width在变长的时候 能以中心为原点，向两边伸长吗
【腾讯云】学生服务器套餐10元/月 >>>   

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

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

CSS3
举报
奥巴码侬
发帖于2年前 2回/408阅
奥巴码侬
共有2个答案 最后回答: 2年前
按票数排序 显示最新答案 
<!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>



顶部