<html>
<head lang="en">
<meta charset="UTF-8">
<title>響應式佈局</title>
<style>
body,*,figure,div,h1,h2,h3,h4,h5,h6,p,figcaption{ margin:0;padding:0;font-family: "微軟雅黑";}
figure{ position:relative;width:33.33%;overflow: hidden; float: left; height: 350px;}
figure img{ opacity:0.8;transition:all 0.45s;-webkit-transition:all 0.45s}
figcaption{position:absolute;top:0;left: 0; color:#fff;}
figure figcaption p,h2,span,div,h4{transition:all 0.45s;-webkit-transition:all 0.45s}
@media screen and (min-width: 1001px){
figure{ width:33.33%;}
}
@media screen and (max-width: 600px){
figure{ width:100%;}
}
@media screen and (min-width: 601px) and (max-width: 1000px){
figure{ width:50%;}
}
.test1{
background-color:#2f0000 ;
}
.test1 figcaption p{
background: #fff; color:#666; margin:3px; text-align: center; transform:translate(-120px,0); -webkit-transform:translate(-120px,0);
}
.test1 figcaption{
padding:20px;
}
.test1 figcaption p:nth-of-type(1){
transition-delay:0.05s;-webkit-transition-delay:0.05s;
}
.test1 figcaption p:nth-of-type(2){
transition-delay:0.1s;-webkit-transition-delay:0.1s;
}
.test1 figcaption p:nth-of-type(3){
transition-delay:0.15s;-webkit-transition-delay:0.15s;
}
.test1:hover figcaption p{
transform:translate(0,0); -webkit-transform:translate(0,0);
}
.test1:hover img{transform:translate(-50px,0);-webkit-transform:translate(-50px,0);opacity:0.5;}
.test2{ background-color:#030;}
.test2 figcaption{width:100%; height:100%;}
.test2 figcaption h2{ margin-top:10%; margin-left:10%; }
.test2 figcaption p{ margin-top:10px; margin-left:10%; transform:translate(0,50px); opacity:0;}
.test2:hover figcaption p{ transform:translate(0,0px); opacity:1;}
.test2 figcaption div{width:80%;height:80%; border:2px solid #fff; position:absolute; top:10%; left: 10%;transform:translate(0,-350px) rotate(360deg)}
.test2:hover figcaption div{transform:translate(0,0) rotate(0deg)}
.test2:hover img{transform:translate(-50px,0);opacity:0.5;}
.test3{ background-color:#000;}
.test3 figcaption{ margin-top:10%; margin-left:10%; }
.test3 figcaption h2{ transform:skew(90deg)}
.test3 figcaption p{ transform:skew(90deg) ; transition-delay:0.1s;}
.test3:hover figcaption h2{ transform:skew(0deg)}
.test3:hover figcaption p{ transform:skew(0deg)}
.test3:hover img{transform:translate(-50px,0);opacity:0.5;}
.test4{background-color:#0081c2;}
.test4 figcaption{width:100%; height:100%;}
.test4 figcaption div{width:80%;height:80%; border:2px solid #fff; position:absolute; top:10%; left: 10%; opacity:0; transform:scale(1.2,1.2);}
.test4 figcaption h2{ margin-top:10%; margin-left:10%; opacity:0; transform:scale(1.2,1.2) }
.test4 figcaption p{ margin-top:10px; margin-left:10%;opacity:0; transform:scale(1.2,1.2); }
.test4:hover figcaption h2{ opacity:1; transform:scale(1,1) }
.test4:hover figcaption p{ opacity:1; transform:scale(1,1); }
.test4:hover figcaption div{transform: scale(1,1) ;opacity:1;}
.test4 img{transform:scale(1,1);}
.test4:hover img{transform:scale(1.2,1.2);opacity:0.5;}
.test5{background-color:#57a957;}
.test5 figcaption{width:100%; height:100%;}
.test5 figcaption div{width:150%;height:100%; background-color:rgba(0,0,0,0.75); position:absolute; top:350px; left: 0;
transform:rotate(0deg); transform-origin:0 0;}
.test5:hover figcaption div{ transform:rotate(-20deg); }
.test5 figcaption h2{ margin-top:10%; margin-left:10%; opacity:0; transform:rotate(0deg); }
.test5 figcaption p{ margin-top:10px; margin-left:10%; opacity:0; transform:rotate(0deg); transition-delay:0.1s}
.test5:hover figcaption h2{ margin-top:10%; margin-left:10%; opacity:1; transform:rotate(360deg); }
.test5:hover figcaption p{ margin-top:10px; margin-left:10%; opacity:1; transform:rotate(360deg);}
.test5 figcaption h4:nth-of-type(1){ position:absolute; bottom:10%;right:15%; opacity: 0; transform:translate(100px,0)}
.test5 figcaption h4:nth-of-type(2){ position:absolute; bottom:10%;right:5%; opacity: 0; transform:translate(100px,0)}
.test5:hover figcaption h4:nth-of-type(1){ opacity: 1; transform:translate(0px,0) }
.test5:hover figcaption h4:nth-of-type(2){ opacity: 1; transform:translate(0px,0)}
.test5:hover img{transform:translate(-50px,0);opacity:0.5;}
.test6{background-color:#dd1144;}
.test6 figcaption{width:100%; height:100%;}
.test6 figcaption h2{margin-top:12%; margin-left:16%; transform:skew(90deg); opacity:0;}
.test6 figcaption p{margin-top:12px; margin-left:16%; transform:skew(90deg);opacity:0;}
.test6 figcaption div:nth-of-type(1){width:80%;height:70%;border-bottom: 2px solid #fff; border-top: 2px solid #fff; position:absolute; top:15%; left: 10%;
transform:rotate(0deg) skew(0,90deg); }
.test6 figcaption div:nth-of-type(2){width:70%;height:90%;border-left: 2px solid #fff; border-right: 2px solid #fff; position:absolute; top:5%; left: 15%;
transform:rotate(0deg) skew(90deg,0);}
.test6:hover figcaption div:nth-of-type(1){transform:skew(0,0); }
.test6:hover figcaption div:nth-of-type(2){transform:skew(0,0); transition-delay:0.1s}
.test6:hover figcaption h2{ opacity:1;transform:skew(0,0);}
.test6:hover figcaption p{transform:skew(0,0);opacity:1;}
.test6:hover img{transform:translate(-50px,0);opacity:0.5;}
</style>
</head><body>
<figure class="test1">
<img src="images/res.png" />
<figcaption>
<h2>平移動畫</h2>
<p>圖片註解</p>
<p>圖片註解</p>
<p>圖片註解</p>
</figcaption>
</figure>
<figure class="test2">
<img src="images/res.png" />
<figcaption>
<h2>旋轉動畫</h2>
<p>圖片註解</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="images/res.png" />
<figcaption>
<h2>扭曲動畫</h2>
<p>圖片註解</p>
</figcaption>
</figure>
<figure class="test4">
<img src="images/res.png" />
<figcaption>
<h2>縮放動畫</h2>
<p>圖片註解</p>
<div></div>
</figcaption>
</figure>
<figure class="test5">
<img src="images/res.png" />
<figcaption>
<h2>特殊旋轉動畫</h2>
<p>圖片註解</p>
<div></div><h4>item1</h4><h4>item2</h4>
</figcaption>
</figure>
<figure class="test6">
<img src="images/res.png" />
<figcaption>
<h2>特殊縮放動畫</h2>
<p>圖片註解</p>
<div></div>
<div></div>
</figcaption>
</figure>
</body>
</html>