css3动画效果 

<!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-width:600px){
    figure{width:100%;}
}

@media screen and ( min-width:600px)and ( max-width:1000px){
    figure{width:50%;}
}

@media screen and ( min-width: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;}

 

posted @ 2018-04-18 16:23  航行远方  阅读(246)  评论(0)    收藏  举报