手记

笔记:css3 transition 宽度以中心为原点向两边伸长

参考原文章(问答):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 src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $('.bar').hover(function(){
        $('.bar').toggleClass('active');
    });
</script>

</body>
</html>
1人推荐
随时随地看视频
慕课网APP