CSS3动画，开关门

最新推荐文章于 2025-03-13 14:30:18 发布

cxzlp0521

最新推荐文章于 2025-03-13 14:30:18 发布

阅读量968

点赞数

分类专栏：前端UI组件文章标签： css3 动画开关门

本文链接：https://blog.youkuaiyun.com/cxzlp12345/article/details/84978523

版权

本文主要展示了如何使用CSS3实现有趣的开关门动画效果，包括详细的HTML和CSS代码示例，适合前端开发者进行实践练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无聊练习的css动画效果

1.效果展示

2.html代码

    <div class="wrap">
        <div class="door-l">
            
        </div>
        <div class="door-r">
            
        </div>
    </div>

3.css代码

        .wrap {
            width: 470px;
            height: 270px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);   /* transform:translate 实现垂直居中 */
            background: url("images/hzw.jpg");
            perspective:1000px;   /* 加上视距效果，可展现3d效果 */
        }

        .wrap:hover .door-l{
            transform: rotateY(-130deg);
        }
        .wrap:hover .door-r{