使用css平面转换实现开门效果

最新推荐文章于 2024-07-17 16:51:52 发布

一木知夏

最新推荐文章于 2024-07-17 16:51:52 发布

阅读量728

点赞数 2

文章标签：平面 css3 前端

本文链接：https://blog.csdn.net/m0_52908502/article/details/124720053

版权

使用css的平移属性可以实现如下图的开门效果

首先html结构为一个大的div包裹两个等高等宽的小div

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

给大盒子设置宽高,插入背景图片,并将盒子居中

        .box {
            width: 1336px;
            height: 600px;
            background: url(../images/bg.jpg) no-repeat;
            background-size: contain;
            margin: 100px auto;
}

给两个盒子加浮动,并设置宽高,插入背景图,left为在左边平分显示,right为在右边平分显示

        .box>div {
            float: left;
            transition: all 1s;

        }

        .left {
            width: 50%;
            height: 600px;
            background: url(../images/fm.jpg) left;
        }

        .right {
            width: 50%;
            height: 600px;
            background: url(../images/fm.jpg) right;
        }

因为鼠标经过效果加上hover伪类效果(因为左边盒子向左水平所以设置负值)

        .box:hover .left {
            transform: translateX(-100%);

        }

        .box:hover .right {
            transform: translateX(100%);

        }

最后给大盒子加上溢出隐藏

       .box {
            width: 1336px;
            height: 600px;
            background: url(../images/bg.jpg) no-repeat;
            background-size: contain;
            margin: 100px auto;
            overflow: hidden;
        }

大功告成!

一木知夏

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用css平面转换实现开门效果

使用css的平移属性可以实现如下图的开门效果首先html结构为一个大的div包裹两个等高等宽的小div<body> <div class="box"> <div class="left"></div> <div class="right"></div> </div></body>给大盒子设置宽高,插入背景图片,并将盒子居中 .
复制链接

扫一扫