work转换html,翻转换图.html · 张斯佗罗夫柯基/personal work notes - Gitee.com

反转换图

#box{

width: 440px;

height: 824px;

margin: 200px auto;

border: 2px solid black;

perspective: 1000;

position: relative;

overflow: hidden;

}

img{

display: block;

position: absolute;

backface-visibility: hidden;

top: 0;

left: 0;

}

.font{

z-index: 10;

}

.back{

z-index: 5;

transform: rotateY(180deg);

}

.rever{

transition: all 1s;

position: relative;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

}

#box:hover .rever{

transform: rotateY(180deg);

}

span{

position: absolute;

display: block;

width: 0;

height: 0;

background-color: red;

transition: all 1s;

}

.heng{

left: 0px;

height: 2px;

}

.heng-t{

top: 5px;

}

.heng-b{

bottom: 5px;

}

.shu{

top: 0px;

width: 2px;

}

.shu-l{

left: 5px;

}

.shu-r{

right: 5px;

}

#box:hover .heng{

width: 450px;

}

#box:hover .shu{

height: 834px;

}

.shadow{

width: 100%;

height: 100%;

background-color: rgba(0,0,0,.5);

position: absolute;

z-index: 20;

transform: translateY(100%);

transition: all .7s;

color: white;

font-size: 40px;

text-align: center;

}

.shadow p{

height: 170px;

position: absolute;

top: 50%;

margin-top: -85px;

}

#box:hover .shadow{

transform: translateY(0);

}

终于成功了！这个demo涵盖：1边线动态生成；2翻转换图；3遮盖层淡入

一键复制

编辑

Web IDE

原始数据

按行查看

历史