利用HTML和CSS制作双开门效果

与风过山岗

已于 2024-04-13 20:03:15 修改

阅读量412

点赞数 4

分类专栏：前端开发文章标签： html css 前端

于 2024-04-13 19:50:27 首次发布

本文链接：https://blog.csdn.net/weixin_54454406/article/details/137723309

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS3实现平移和旋转动画来模拟双开门效果，通过代码示例展示了如何通过`transform`属性以及鼠标悬停触发动画。由于作者未提供GIF动态图，读者需自行测试代码以体验效果。

摘要由CSDN通过智能技术生成

笔者在这里做两种效果，但是笔者还不会制作GIF的动态图，所以在这篇文章展示的效果会有些欠缺，还请各位谅解。

1.首先是平移的效果。

效果解读：就是两扇门往两边移动，这样的效果比较容易制作。

开门前的效果图：

开门后的效果图：

代码如下：在代码中我有做一些说明，如果您有不理解的地方，可以在评论区留言，笔者看到后会在第一时间回复，谢谢。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双开门</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father {
            display: flex;
            /* 为了使图片不变形，我这里的大小和图片大小一样 ，大家根据情况而定*/
            width: 1920px;
            height: 1080px;
            margin: 0 auto;
            /* 这里读者可以填自己的图片地址 */
            background: url(R-C.jpg) no-repeat;

        }

        .father .left,
        .father .right {
            width: 50%;
            height: 1080px;
            /* 这里注意，其实开门图是一张图片，只是这里把它分开，在左右两个盒子中分别显示，可以理解为精灵图的做法 */
            background: url(OIP-C.jpg) no-repeat;
            background-size: 1920px 1080px;
            transition: all .5s;
        }


        .father .right {
            /* right 表示的取到精灵图右面的图片 */
            background-position: right 0;
        }

        /* 2. 鼠标悬停的效果：左右移动 */
        .father:hover .left {
            transform: translate(-100%);
        }

        .father:hover .right {
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left">

        </div>
        <div class="right">

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

</html>

2.第二种方法是有一种推门的感觉，在这里要用到第二种属性，叫做旋转

在这里读者简单的介绍一下旋转的使用。

旋转

transform: rotate(旋转角度);

取值：角度单位是 deg
技巧
- 取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转

转换原点

默认情况下，转换原点是盒子中心点

transform-origin: 水平原点位置 垂直原点位置;

取值：

方位名词（left、top、right、bottom、center）
像素单位数值
百分比

因为读者没有录制GIF动态图，不好展示效果，大家可以复制代码，查看效果，谢谢。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双开门</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            perspective: 1000px;
        }

        .father {
            display: flex;
            /* 为了使图片不变形，我这里的大小和图片大小一样 ，大家根据情况而定*/
            width: 1920px;
            height: 1080px;
            margin: 0 auto;
            /* 这里读者可以填自己的图片地址 */
            background: url(R-C.jpg) no-repeat;

        }

        .father .left,
        .father .right {
            width: 50%;
            height: 1080px;
            background: url(OIP-C.jpg) no-repeat;
            background-size: 1920px 1080px;
            transition: all .5s;
        }

        .father .right {
            /* right 表示的取到精灵图右面的图片 */
            background-position: right 0;
        }

        /* 2. 鼠标悬停的效果：左右移动 */
        .father:hover .left {
            transform-origin: left;
            transform: rotateY(90deg);
        }

        .father:hover .right {
            transform-origin: right;
            transform: rotateY(90deg);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left">

        </div>
        <div class="right">

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

</html>

注：首先感谢您的浏览，因为读者的能力有限，代码会出现很多的问题，如果在您浏览这篇文章发现了问题，还请您能在评论区留言，笔者在看到留言后会在第一时间解决，谢谢。

与风过山岗

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用HTML和CSS制作双开门效果

笔者在这里做两种效果，但是笔者还不会制作GIF的动态图，所以在这篇文章展示的效果会有些欠缺，还请各位谅解。效果解读：就是两扇门往两边移动，这样的效果比较容易制作。开门前的效果图：开门后的效果图：2.第二种方法是有一种推门的感觉，在这里要用到第二种属性，叫做旋转在这里读者简单的介绍一下旋转的使用。
复制链接

扫一扫