每天一个小案例，今天的案例是双开门。首先看一下效果预览，有一张大的背景图，当鼠标经过这张大的背景图的时候会把左右两辆车向旁边展开，最后展示出来的是汽车内部的内饰仪表盘的状态。应用到的技术是html加CS就能完成，就是这样一个预览的效果，统称为双开门案例。接下来去录制一下讲解视频。

·回到vscode编辑器，这个案例需要有一个容器container，容器里面有两个元素，一个是左边的盒子，一个是右边的盒子，left和right。

·然后到title下面这一行来个style，写一些ACC的样式。写之前先把内外编剧清空，margining，pedaling。

·再接着给container容器去设置一下宽高，宽度为1336个像素，高度为600像素，这个宽高取决于图片素材的原始尺寸。

·来到Vasco的右下角可以看到整张图片的宽高是1366和600的，高度跟图片宽高保持一致可以防止图片形变好。

·容器设置好之后可以给它一个边框线辅助，目前应该能够预想到默认是在浏览器视口左上角的，这个盒子在浏览器视口的左上角。假如想观察起来更方便可以给它加上外边距margin上下各有100像素的距离，左右是auto，这样盒子在水平方向就集中了，在垂直方向距离上方有100像素，看起来更方便观察。

·这一波操作做好之后可以给它加上一个背景图片background UIO属性引进来，引到的素材是BG点jpg。这张图片是刚才汽车内饰的仪表盘界面，玛莎拉蒂。

·整完之后再去设置一下container中的left和container中的right，这两盒子的宽高分别是副容器的一半，高度是完整高度，宽度是它的一半，高度是完整高度就是600像素。

·刚刚设置好之后，它也有对应的背影图片给它引进来，这张背影图片叫做FM。

可以看到两张图片都成功引入了，这个元素材其实是有两辆车的，可以打开元素材看一看，有左右两辆车，左边这辆是深蓝色，右边这辆是白色，这两辆车刚好是车头相对。

假如想要让这个汽车能够形成一个双开门的效果，需要让这个盒子首先布局在整个附容器的一行上展示。目前为什么它会掉下去？因为left和right这两个都是div元素，div元素独占一行，所以是上下排列，可以使用浮动让它们在一行上展示reload left，这样两个盒子就在同一行展示。

现在还要再微调一下右边盒子中的图片，目前这个还是一个深蓝色的车，车头朝右，想把它改成白色的车头朝左的状态。运用到的技术其实就是background positior，让它的图片边缘跟容器的右侧都贴齐，然后去看一下，它就变成了一个车头找左的容器。

假如感受不到这种边界感，可以加个边框线看一看，这样就能感受到。当然这一家可能会有一些附带的效果，因为容器放不下可能也会掉下来，所以为了不至于太难受，可以给它加上一个sign包的box，加上这属性之后，哪怕宽度放不下也会自动分配。

加了边框线之后就能感受到了左右两个盒子，这一块是右盒子，那一块是左盒子。通过背影图片基本的布局已经调好了，再接下来需要给它做一个双开门的效果。

它的案例实现的逻辑就是鼠标经过container，让left的格子向左边移，让right的盒子向右边，移动的距离多少自己去决定，一般都是移动自身宽度的100/100。有一个很好用的属性叫做transform，transform里有个属性值叫做translate，可以通过这个来实现百分比的操作。

接下来去实现一下，content容器选中always效果，加上让left盒子向左移动，就给它一个transform，as light，加上轴方向，x轴往左移动就给它一个复数，因为负数线代表是x轴方向的负方向。

·然后让里面right是向右移动，所以负号可以去了，就正的往右去移动。这时候去看应该会有一个展开的效果，但是比较生硬，可以给它加上一些过渡，让它看起来更柔和一些。跟上过渡属性transcation，过渡时间可以1秒钟、2秒钟自己去决定，加了过渡时间之后就没那么出雾了。

·目前还面临的一个问题就是有多余显示的部分也几度移开了，还有一些破绽的。这个情况是由overflow hiding来做的，一出隐藏，给container加一个overflow hiding，又可以让内容超出的部分自动被解裁掉。始终宽高要盒子中才能够有效渲染，超过盒子就不会被渲染出来。这样就实现了双开门的案例。

·最后把刚才调试的边框线取了，所有的边框线都是为了辅助调试用，调试完之后就把边框线删了。

这个案例就分享到这里。