html+div+动画效果,html5+css3实现2D动画效果演示

@charset "utf-8";

*{margin:0px;padding:0px;}

figure{position:relative;width:33.33%;height:350px;overflow:hidden;float:left;}

figcaption{position:absolute;top:0px;left:0px;color:#FFF;font-family:"微软雅黑";margin:5px 10px;}

@media screen and (max-width:600px){

figyre{width:100%}

}

@media screen and (min-width:601px) and (max-width:1000px){

figure{width:50%}

}

@media screen and (min-width:1001px){

figure{width:33.33%}

}

figure figcaption p,h2,div{transition:all 0.35s;}

figure img{transition:all 0.35s;opacity:0.8;}

.test1{background:#2f0000;}

.test1 figcaption p{background:#fff;color:#333;margin:5px;text-align:center;transform:translate(-130px,0px);}

.test1 figcaption{padding:20px;}

.test1:hover figcaption p{transform:translate(0px,0px);}

.test1 figcaption p:nth-of-type(1){ transition-delay:0.05s;}

.test1 figcaption p:nth-of-type(2){ transition-delay:0.1s;}

.test1 figcaption p:nth-of-type(3){ transition-delay:0.15s;}

.test1:hover img{transform: translate(-50px,0); opacity:0.5;}

.test2{background:#030;}

.test2 figcaption{width:100%;height:100%;}

.test2 figcaption h2{margin-left:15%;margin-top:15%;}

.test2 figcaption p{margin-left:15%; transform:translate(0px,50px);opacity:0;}

.test2 figcaption div{border:2px solid #FFF;width:80%;height:80%;position:absolute;top:10%;left:10%;transform:translate(0px,-350px) rotate(0deg);}

.test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);}

.test2:hover img{opacity:0.5;transform:translate(-50px,0px);}

.test2:hover figcaption p{transform:translate(0px,0px);opacity:1;}

.test3{background:#F30;}

.test3 figcaption{top:30%;left:15%;}

.test3 figcaption p{ transform:skew(90deg);}

.test3 figcaption h2{ transform:skew(0deg);}

.test3:hover figcaption p{ transform:skew(0deg); transition-delay:0.1s;}

.test3:hover figcaption h2{ transform:skew(90deg);}

.test3:hover img{opacity:0.5; transform:translate(-50px,0px);}

.test4{background:#030;}

.test4 figcaption{width:100%;height:100%;}

.test4 figcaption div{width:80%;height:80%;border:2px solid #fff;position:absolute;top:8%;left:8%;opacity:0;}

.test4 figcaption h2{margin-top:20%;margin-left:15%;opacity:1;}

.test4:hover figcaption div{ transform:scale(1.2,1.2);opacity:1;}

.test4:hover img{ transform:scale(1.2,1.2);opacity:0.5;}

.test4:hover figcaption h2{ transform:scale(1.2,1.2);opacity:0.5;}