<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" >
Index.html
body{background: #ddd; Font-family:arial, Helvetica, Sans-serif; ;}. center{Margin:auto; Text-align:center; width:600px; height:180px; padding:0;}. Center h1{font-size:68px; Letter-spacing: -3px; Font-weight:bold; margin:0;}. Center p:first-of-type{font-size:38px; margin:0; Color:rgba (51, 51, 51, 0.5);}. Center p{color: #333;} ul.tupian{List-style-type:none; width:1000px; height:800px; Margin:auto; padding:0;} Ul.tupian li{position:relative; Float:left; margin:15px; width:270px; height:190px; Overflow:hidden; border-radius:5px; box-shadow:1px 1px 1px rgba (0, 0, 0, 0.2); -webkit-transition:all 0.15s ease-in; Transition:all 0.15s ease-in;} Ul.tupian li:hover{z-index:11; -webkit-transform:scale (1.2) translate3d (0, -30px, 0) rotate (2.5deg); Transform:scale (1.2) translate3d (0, -30px, 0) rotate (2.5deg);} div.details{border-bottom-left-radius:5px; Border-bottom-right-radius:5px; Position:absolute; bottom:0px; padding:10px 0px 10px 0px; width:270px; Background:rgba (255, 255, 255, 0.7);} Div.details p {padding-left:10px; margin:0; Float:left; font-size:15px;} Div.details A.anniu {position:absolute; padding:5px 7px 5px 7px; top:5px; right:7px; Background-color:rgba (0, 0, 0, 0.13); Color: #0090e2; font-size:12px; border-radius:15px; Text-decoration:none; -webkit-transition:all 0.15s ease-in; Transition:all 0.15s ease-in;} Div.details a.anniu:hover{background-color: #0090e2; color: #fff;} Ul.tupian img{width:270px; height:190px;} li[id]{Overflow:hidden; Position:absolute; width:0px; height:0px; left:0; top:0; opacity:0; Background:rgba (0,0,0,.8); -webkit-transition:opacity 0.2s Cubic-bezier (0,0,0,1); Transition:opacity 0.2s Cubic-bezier (0,0,0,1);} Li[id]:target div.xinxi{width:400px; height:200px; Position:relative; margin:0 Auto; top:15%; Background: #fff; BORDER:1PX solid; padding:0;} Div.xinxi p:first-child {background-color: #0090E2; padding:10px; margin:0;} a.close{background: #000; Position:absolute; Top: -10px; right:10px; line-height:0; Color: #fff; Text-align:center; Font-weight:bold; border:2px solid #fff; padding:12px 9px 9px; border-radius:30px;} li[id]:target{width:100%; height:100%; Opacity:1; z-index:30; position:fixed; top:0px; Overflow-x: Hidden; /* Overflow-y: scroll; */margin-bottom:25px;}
Tepian.css