<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
background-image:radial-gradient(white,black);
display:flex;
justify-content:center;
align-items:center;
}
.shu{
position:relative;
width:300px;
height:400px;
background-color:rgba(255,255,255,0.774);
transform-style:preserve-3d;
box-shadow:300px0px30pxrgb(0,0,0,.6)inset;
transition:1scubic-bezier(.79,.34,.47,.92);
}
.shu::after{
content:'';
position:absolute;
height:3px;
width:303px;
left:0px;
bottom:-3px;
/*background-color:rgb(100,96,96);*/
background-image:linear-gradient(toright,rgb(71,68,68),rgba(124,120,120,0.3));
border-bottom-left-radius:5px;
}
.shu::before{
content:'';
position:absolute;
width:3px;
height:100%;
right:-3px;
top:0px;
background-color:rgb(112,108,108);
background-image:linear-gradient(totop,rgb(114,111,111),rgba(90,87,87,0.5));;
border-top-right-radius:3px;
}
.shu:hover{
box-shadow:30px0px30pxrgb(0,0,0,.6)inset;
transform:rotate(-5deg);
}
.feng{
position:absolute;
width:100%;
height:100%;
z-index:2;
background-image:url(4.jpg);
background-size:100%;
transform-origin:left;
transition:1scubic-bezier(.79,.34,.47,.92);
border-top-left-radius:2px;
border-bottom-left-radius:2px;
}
.shu:hover.feng{
transform:rotateY(-140deg);
}
.wen{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
font-family:'fangsong';
text-align:left;
}
</style>
</head>
<body>
<divclass="shu">
<divclass="feng"></div>
<divclass="wen">
<h3style="padding-top:50px;padding-left:40px;">LifeofPi</h3>
<pstyle="padding-top:20px;padding-left:40px;padding-right:15px;">
HelivesinScarborough.He'sasmall,slimman–nomorethanfivefootfive.Darkhair,darkeyes.Hairgreyingatthetemples.Can'tbeolderthanforty.leasingcoffee-colouredcomplexion1.Mildfallweather,yetputsonabigwinterparkawithfur-linedhood2forthewalktothediner.
</p>
</div>
</div>
</body>
</html>
|
运行时间载入中.....