<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="images/main.css" rel="stylesheet" type="text/css"> </head> <body> <figure class="box1"> <img src="images/2.jpg"> <figcaption> <h2>这是一位清纯的美女</h2> <P>美女今年20岁</P> <P>美女是个大学生</P> <P>美女家乡是四川</P> </figcaption> </figure> <figure class="box2"> <img src="images/2.jpg"> <figcaption> <h2>旋转动画</h2> <P>飞来飞去</P> <div></div> </figcaption> </figure> <figure class="box3"> <img src="images/2.jpg"> <figcaption> <h2>斜切动画</h2> <P>美女今年20岁 美女是个大学生 美女家乡是四川</P> </figcaption> </figure> <figure class="box4"> <img src="images/2.jpg"> <figcaption> <h2>旋转动画</h2> <P>飞来飞去</P> <div></div> </figcaption> </figure> </body> </html>
@charset utf-8; figure,figcaption,body,h2,p{margin:0; padding:0;} figure{position:relative; width:33.33%; float:left; overflow:hidden; height:350px;} figcaption{ position:absolute; top:0; left:0; color:#fff;} figure img{opacity:0.8;transition:all 0.35s;} figcaption p,h2,div,span{ transition:all 0.35s;} @media screen and ( max-600px){ figure{width:100%;} } @media screen and ( min-600px)and ( max-1000px){ figure{width:50%;} } @media screen and ( min-1001px){ figure{width:33.33%;} } .box1{background:#f00;} .box1 figcaption{padding:20px;} .box1 figcaption p{background:#fff; margin:10px; color:#333; text-align:center; transform:translate(-280px,0)} .box1:hover figcaption p{transform:translate(0,0)} .box1 figcaption p:nth-of-type(1){transition-delay:0.05s;} .box1 figcaption p:nth-of-type(2){transition-delay:0.10s;} .box1 figcaption p:nth-of-type(3){transition-delay:0.15s;} .box1:hover img{transform:translate(-50px,0); opacity:0.5;} .box2{background:green;} .box2 figcaption{width:100%; height:100%;} .box2 figcaption div{width:60%; height:60%; border:1px solid #fff; position:absolute; top:10%; left:10%; transform:translate(0,-800px) rotate(0deg);} .box2 figcaption p{margin-left:15%; margin-top:10%;transform:translate(0,40px); opacity:0;} .box2 figcaption h2{margin-left:15%; margin-top:15%;} .box2:hover figcaption p{transform:translate(0,0); opacity:1;} .box2:hover figcaption div{transform:translate(0,0) rotate(360deg);} .box2:hover img{transform:translate(-50px,0); opacity:0.5;} .box3{background:gray;} .box3 figcaption{padding:20px;} .box3 figcaption p{transform:skew(90deg); transition-delay:0.1s;} .box3 figcaption h2{transform:skew(90deg);} .box3:hover figcaption h2{transform:translate(0,0); } .box3:hover figcaption p{transform:skew(0deg);} .box3:hover img{transform:translate(-50px,0); opacity:0.5;} .box4{background:green;} .box4 figcaption{width:100%; height:100%;} .box4 figcaption div{width:60%; height:60%; border:1px solid #fff; position:absolute; top:10%; left:10%;transform:scale(1.2,1.2); opacity:0; } .box4 figcaption p{margin-left:15%; margin-top:10%;opacity:0;transform:scale(1.2,1.2); opacity:0} .box4 figcaption h2{margin-left:15%; margin-top:15%;transform:scale(1.2,1.2); opacity:0} .box4:hover figcaption div{transform:scale(1,1); opacity:1;} .box4:hover figcaption h2{transform:scale(1,1); opacity:1;} .box4:hover figcaption p{ transform:scale(1,1); opacity:1;} .box4:hover img{transform:scale(1.2,1.2); opacity:0.5;}