开门成功html,开门大吉.html

开门大吉

section {

width: 440px;

height: 300px;

border: 1px solid #000;

margin: 100px auto;

background: url(image/timg.jpg) no-repeat;

position: relative;

perspective: 1000px; /*2D变3D 给父盒子添加透视效果*/

background-size: cover;

}

.door-l,.door-r {

position: absolute;

top: 0;

width: 50%;

height: 100%;

background: url(image/f.jpg);

transition: all 1s; /*两个门都做过渡*/

}

.door-l {

left: 0;

border-right: 1px solid #000;

transform-origin: left; /*设置旋转中心点 左侧盒子按左侧翻转*/

}

.door-r {

right: 0;

border-left: 1px solid #000;

transform-origin: right;

}

.door-l::before,

.door-r::before {

content: "";

position: absolute;

top: 50%;

width: 20px;

height: 20px;

border: 1px solid #000;

border-radius: 50%;

transform: translateY(-50%); /*走自己高度的一半*/

}

.door-l::before {

right: 5px;

}

.door-r::before {

left: 5px;

}

/*鼠标经过section盒子 两个门 盒子翻转 rotateY*/

section:hover .door-l {

transform: rotateY(-130deg);

}

section:hover .door-r {

transform: rotateY(130deg);

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史