<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幀動畫案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
html,body {
height: 100%;
/* overflow: hidden; */
}
.wrap {
width: 100%;
height: 100%;
/* overflow: hidden; */
position: relative;
}
.wrap>img {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.wrap ul {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
z-index: 100;
}
.wrap ul li {
display: inline-block;
border: 10px solid rgba(255,255,255,0.5);
margin: 0 10px;
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
}
.wrap ul li img {
width: 100%;
height: 100%;
}
/* 要有空格 */
.wrap :target {
z-index: 10;
}
/* 一定不能有空格 */
#bg1:target {
animation: slideLeft 1s 1;
}
@keyframes slideLeft {
0% {
transform: translate(-800px);
}
100% {
transform: translate(0);
}
}
#bg2:target {
animation : slideTop 1s 1;
}
@keyframes slideTop {
0% {
transform: translate(0, -500px);
}
100% {
transform: translate(0);
}
}
#bg3:target {
animation : zoomIn 1s 1;
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#bg4:target {
animation : zoomOut 1s 1;
}
@keyframes zoomOut {
0% {
transform: scale(3);
}
100% {
transform: scale(1);
}
}
#bg5:target {
animation : rotate 1s 1;
}
@keyframes rotate {
0% {
transform: scale(0) rotate(0);
}
100% {
transform: scale(1) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<img alt="" src="img/1.jpg" id="bg1">
<img alt="" src="img/2.jpg" id="bg2">
<img alt="" src="img/3.jpg" id="bg3">
<img alt="" src="img/4.jpg" id="bg4">
<img alt="" src="img/5.jpg" id="bg5">
<ul>
<li><a href="#bg1"><img alt="" src="img/1.jpg"></a></li>
<li><a href="#bg2"><img alt="" src="img/2.jpg"></a></li>
<li><a href="#bg3"><img alt="" src="img/3.jpg"></a></li>
<li><a href="#bg4"><img alt="" src="img/4.jpg"></a></li>
<li><a href="#bg5"><img alt="" src="img/5.jpg"></a></li>
</ul>
</div>
</body>
</html>
