itboos/.html

## .html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css3 transition 实现div宽度以中心为原点向两边伸长 </title>
    <style type="text/css">
    .container {
        text-align: center;
    }

    .bar {
        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;
    }

    .bar:hover {
      width: 200px;
    }
    </style>
</head>

<body>
<h3>css3 transition 实现div宽度以中心为原点向两边伸长-鼠标滑动到 div 查看效果</h3>
<div class="container">
  <div class="bar"></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>css3 transition 实现div宽度以中心为原点向两边伸长 </title>
	<style type="text/css">
	.container {
	text-align: center;
	}

	.bar {
	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;
	}

	.bar:hover {
	width: 200px;
	}
	</style>
	</head>

	<body>
	<h3>css3 transition 实现div宽度以中心为原点向两边伸长-鼠标滑动到 div 查看效果</h3>
	<div class="container">
	<div class="bar"></div>
	</div>

	<script type="text/javascript">
	</script>
	</body>
	</html>