css图片开门效果图 |css颜色渐变 gradient

<div class="door">
<div class="left-door"></div>
<div class="right-door"></div>
</div>
<style>
.door {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
background-color: #DDD;
}
.left-door, .right-door {
width: 50%;
height: 100%;
position: absolute;
top: 0;
background-image: url('door.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
transition: transform 1s ease-in-out;
}
.left-door {
left: 0;
}
.right-door {
right: 0;
}
.door:hover .left-door {
transform: rotateY(90deg);
}
.door:hover .right-door {
transform: rotateY(-90deg);
}
</style>

首先在HTML中创建一个包含左右两扇门的div容器，并设置好对应的CSS样式。对于左右两扇门，大家也要为它们添加CSS样式，包括宽高、定位、背景图等属性。但是大家暂时不需要把左右两扇门现在就完全展现出来，所以大家需要将组合门体形式的div容器设置为overflow:hidden。

现在大家可以通过将鼠标悬停在门体上来触发其展开的效果。因此设置门体的:hover状态下的左右两扇门的旋转效果，以达到类似开门的效果。

最后展示的结果即为一幅具有图片开门效果的图像。可以在其中选择不同的图片作为门体的背景图来展示各种不同的开门效果。