【CSS】js向两边展开

Z时代
2024-01-10
分类：技术分享

图片描述

比如我有这样一个div宽100高100
我想点击的是时候让他的展示方式是从中间向两边展开，css3要怎么写

回答：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outter {
            position: relative;
            width: 202px;
            height: 400px;
        }
        .left,
        .right {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 100px;
            height: 400px;
            background-color: #000;
        }
        .right {
            left: inherit;
            right: 0;
        }
        .ani {
            animation: ani 5s;
            -moz-animation: ani 5s;    /* Firefox */
            -webkit-animation: ani 5s;    /* Safari 和 Chrome */
            -o-animation: ani 5s;
        }
        @keyframes ani {
            from {
                width: 100px;
            }
            to {
                width: 0;
            }
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="left inner"></div>
        <div class="right inner"></div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
        $(function() {
            var inner = $('.inner');
            $('.outter').one('click', function() {
                inner.addClass('ani').on('webkitAnimationEnd', function() {
                    inner.hide();
                });
            });
        });
    </script>
</body></html>

回答：

作为初学者，看楼主提问带的标签里有JQ，就兴致勃勃地写了一下。其实楼上的CSS3属性真心很好啊！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>两边展开</title>
    <link rel="stylesheet" href="">
    <style>
    .content {
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;
    }
    .content div {
        position: absolute;
        width: 49px;
        height: 100px;
    }
    .left {
        left: 0;
        background-color: black;
        margin-right: 2px;
    }
    .right {
        background-color: black;
        right: 0;
    }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script>
    $(function() {
        $(".content").click(function() {
            $(".left").animate({
                left: "-49px"
            }, 1000);
            $(".right").animate({
                right: "-49px"
            }, 1000)
        })
    })
    </script>
</body>
</html>