双开门案例

XH_LZ

于 2022-02-14 11:52:16 发布

阅读量403

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_46279754/article/details/122921635

版权

本文介绍如何使用CSS3实现响应式布局，通过`position`属性结合伪元素`::before`和`::after`，展示动态内容切换效果。通过过渡效果，鼠标悬停时左右平移图片，适合前端开发者学习基础动画技巧。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            transition: all 0.5s;

            width: 1280px;
            height: 500px;
            background-image: url("img/03.jpg");
            overflow: hidden;
        }

        /*使用css创建html   before向左  after向右 是行内*/
        #container::before,
        #container::after {
            float: left;
            content: "";
            width: 50%;
            height: 500px;
            background-image: url("img/01.jpg");
            background-size: cover;
            transition: all 0.5s;
        }

        #container::after {
            content: "";
            background-position: right 0;
        }

        #container:hover::before {
            transform: translateX(-100%);
        }
        #container:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
<div id="container">

</div>
</body>
</html>