开门大吉

最新推荐文章于 2024-03-30 11:44:38 发布

山有木兮木有枝21

最新推荐文章于 2024-03-30 11:44:38 发布

阅读量243

点赞数

分类专栏： web前端 # practice

本文链接：https://blog.csdn.net/weixin_39477501/article/details/104593250

版权

web前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

practice

10 篇文章 0 订阅

订阅专栏

1. 代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
    section {
        width: 500px;
        height: 360px;
        background: url(images/tfboys.jpg) no-repeat;
        margin: 30px auto;
        position: relative;
        perspective: 1000px;
    }
    .door-l,
    .door-r {
        background-color: #9d392a;
        position: absolute;
        top: 0;
        width: 248px;
        height: 358px;
        border: 1px solid #000;
        transition: all 1s ease 0s;
    }
    .door-l {
        transform-origin: left;
        left: 0;
    }
    .door-r {
        transform-origin: right;
        right: 0;
    }
    section div::before {
        content: "";
        width: 20px;
        height: 20px;
        border: 1px solid #000;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
    .door-l::before {
        right: 5px;
    }
    .door-r::before {
        left: 5px;
    }
    section:hover .door-l {
        transform: rotateY(-130deg);/*往左边翻转为负值*/
    }
    section:hover .door-r {
        transform: rotateY(130deg);/*往右边翻转为正值*/
    }
</style>
</head>
<body>
<section>
    <div class="door-l"></div>
    <div class="door-r"></div>
</section>
</body>
</html>

2. 效果图