前言
最近迷上了听泉鉴宝的直播，不得不说确实好看。在直播间里经常能听到他说 “开门！” 这两个字，在他那里，开门的意思是宝贝很好，很有价值，非常开门。但是这次我带大家来实现一个真正的开门，双开门。话不多说，我们直接进入主题。
效果预览
效果展示如下。
HTML部分
首先看到 HTML 部分。
<div class="doorWrap">
<div class="leftDoor">左门</div>
<div class="rightDoor">右门</div>
<div class="content">欢迎光临，客官里边请...</div>
</div>
.leftDoor和.rightDoor这两个类分别代表门的两扇门，"左门" 和 "右门"。这些 HTML 代码描述了门的动画效果，包括门的两扇门和相关的欢迎词内容。整体布局可能用于展示动画效果，例如门的开合以及欢迎词的显示。
CSS部分
紧接着看到 CSS 部分。
body {
box-sizing: border-box;
padding: 160px 0 0 240px;
}
/* 门容器样式 */
.doorWrap {
width: 320px;
height: 320px;
border: 1px solid #666;
perspective: 500px;
position: relative;
display: flex;
}
这里是门容器的样式。在body中，box-sizing: border-box;表示元素的内外边距和边框都将包含在宽度之内。padding: 160px 0 0 240px;设置了上、右、下和左的内边距，分别为 160px、0、0 和 240px。
在.doorWrap类中，设置了门的宽度为 320px，高度为 320px。border: 1px solid #666;定义了门的边框为 1px 的实线边框，perspective: 500px;设置了透视距离为 500px，用于制作 3D 效果。position: relative;：表明该元素是相对定位的，这让后续的绝对定位元素可以相对于它定位。
/* 左门右门的共有样式 */
.leftDoor,
.rightDoor {
width: 50%;
height: 100%;
background-color: burlywood;
transition: 1.2s;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #333;
}
/* 设置旋转元素的基点，左边大门以左侧为基准点旋转 */
.leftDoor {
transform-origin: left;
}
/* 设置旋转元素的基点，右边大门以右侧为基准点旋转 */
.rightDoor {
transform-origin: right;
}
/* 当鼠标悬浮的时候，设置开门的幅度，左门往左侧开 */
.doorWrap:hover .leftDoor {
transform: rotateY(-130deg);
}
/* 右门往右侧开 */
.doorWrap:hover .rightDoor {
transform: rotateY(130deg);
}
/* 内容区的定位层级稍微低一些 */
.content {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: yellowgreen;
display: flex;
justify-content: center;
align-items: center;
}
这里描述了对门的动画效果以及内容区的样式。
在共用样式 .leftDoor 和 .rightDoor中，width: 50%; height: 100%;分别设置了左门和右门的宽度为父容器的 50%，高度为 100%。background-color: burlywood;表示将门的背景颜色设置为褐色。transition: 1.2s;表示为门添加了动画过渡效果，过渡时间为1.2秒。z-index: 2;表示设置了层级为2，用于确定元素的 Z 轴顺序。display: flex;则是使用 Flex 布局。justify-content: center; align-items: center;表示将门内的内容水平和垂直居中。border: 1px solid #333;表示添加了 1px 的实线边框。
在.leftDoor 和 .rightDoor 的独特样式中，transform-origin属性用于将元素旋转的基准点设置为左侧或右侧。:hover 伪类为 .leftDoor 和 .rightDoor 设置了鼠标悬停状态下的旋转效果，分别实现了左门向左侧开和右门向右侧开的动画效果。
在.content 的样式中，position: absolute;：将内容区绝对定位。z-index: 1;表示为内容区设置了层级为1，确保内容位于门的下方。width: 100%; height: 100%;：设置内容区的宽度和高度与父容器一致。background-color: yellowgreen;表示将内容区的背景颜色设置为黄绿色。display: flex; justify-content: center; align-items: center;表示将内容区内的内容水平和垂直居中。
综上所述，这些 CSS 规则创建了一个包含动态的门以及内容区的动画效果，通过 :hover 伪类和 transform 属性实现了门在鼠标悬停时的开合动画效果，同时设置了内容区的样式，以使内容位于门的下方，且水平和垂直居中。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
