itboos · October 17, 2019 02:41
diff --git a/.html b/.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>