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

Maison > Questions et réponses > le corps du texte

jquery - js向两边展开

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

PHP中文网2782 Il y a quelques jours493

répondre à tous(3)je répondrai

大家讲道理2017-04-17 11:35:25

<!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>
    <p class="outter">
        <p class="left inner"></p>
        <p class="right inner"></p>
    </p>
    <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>

répondre

阿神2017-04-17 11:35:25

作为初学者，看楼主提问带的标签里有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 p {
        position: absolute;
        width: 49px;
        height: 100px;
    }
    
    .left {
        left: 0;
        background-color: black;
        margin-right: 2px;
    }
    
    .right {
        background-color: black;
        right: 0;
    }
    </style>
</head>

<body>
    <p class="content">
        <p class="left"></p>
        <p class="right"></p>
    </p>
    <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>

répondre

高洛峰2017-04-17 11:35:25

使用translateX(n)属性，文档看下面
http://www.w3school.com.cn/css3/css3_2dtransform.asp

répondre

Annulerrépondre