css3控制往两边展开 |css3 h1

代码如下：
/*首先，大家要定义一个容器，然后定义其样式。*/
.container {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
/* 下面是定义往左展开的样式. */
.left {
width: 50%;
height: auto;
position: absolute;
left: 0;
top: 0;
transform: translateX(-100%);
}
/* 下面是定义往右展开的样式. */
.right {
width: 50%;
height: auto;
position: absolute;
right: 0;
top: 0;
transform: translateX(100%);
}
/* 接下来大家可以添加过渡效果使展开看起来更加平滑. */
.container:hover .left {
transform: translateX(0%);
transition: all 0.5s ease;
}
.container:hover .right {
transform: translateX(0%);
transition: all 0.5s ease;
}

以上代码可以适用于大多数情况，但如果你要在不同设备上使用该代码可能需要进行一些修改。你可以根据实际情况调整容器的宽度和高度，并且使用一些媒体查询来根据设备不同进行调整。