筆記：css3 transition 寬度以中心為原點(diǎn)向兩邊伸長(zhǎng)

標(biāo)簽：

Html5 CSS3

参考原文章（问答）：css3 transition width在变长的时候能以中心为原点，向两边伸长吗？

核心代码(CSS)：

transition:1s allcubic-bezier(.46,1,.23,1.52);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hoverSlideout Demo</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.active { width: 200px; }
    </style>
</head>
<body>
<h3>css3 transition 实现div宽度以中心为原点向两边伸长</h3>
<div class="container">
    <div class="bar"></div>
</div>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $('.bar').hover(function(){
        $('.bar').toggleClass('active');
    });
</script>

</body>
</html>

點(diǎn)擊查看更多內(nèi)容