笔记：css3 transition 宽度以中心为原点向两边伸长-原创手记-慕课网

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

Tsukiis 2017-06-02 19:19:03 浏览 7707

Tsukiis

关注TA

手记 5

粉丝 11

获赞 24

参考原文章（问答）：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>

相关标签: Html5; CSS3

1人推荐

发表评论