<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>畢業照</title>
<style type="text/css">
*{margin:0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
position: absolute;
bottom: 100px;
left:50%;
margin-left: -100px;
transform-style: preserve-3d;
animation: sport 6s linear 0s infinite normal;}
body{
background: url("img/大合照.JPG");
background-size: cover;
overflow: hidden;
}
ul li{
list-style: none;
height: 200px;
width: 200px;
position:absolute;
left: 0;
right: 0;
background-color: black;
}
ul li:nth-child(1){
transform: rotateY(60deg) translateZ(200px);
}
ul li:nth-child(2){
transform: rotateY(120deg) translateZ(200px);
}
ul li:nth-child(3){
transform: rotateY(180deg) translateZ(200px);
}
ul li:nth-child(4){
transform: rotateY(240deg) translateZ(200px);
}
ul li:nth-child(5){
transform: rotateY(300deg) translateZ(200px);
}
ul li:nth-child(6){
transform: rotateY(360deg) translateZ(200px);
}
ul li img{
width: 200px;
height: 200px;
border:5px solid skyblue;
box-sizing: border-box;
}
@keyframes sport {
from{
transform:rotateX(-10deg) rotateY(0deg);
}
to{
transform:rotateX(-10deg) rotateY(360deg);
}
}
ul:hover{
animation-play-state: paused;
}
ul:hover li img{
opacity: 0.5;
}
ul li:hover img{
opacity: 1;
}
.m{
height: 173px;
width: 157px;
position: absolute;
left: 100px;
bottom: 100px;
animation: move 10s linear 0s infinite normal;
}
@keyframes move {
0%{
left: 100px;
bottom: 100px;
opacity:1;}
20%{
left: 300px;
bottom: 300px;
opacity:0;}
40%{
left:500px;
bottom: 500px;
opacity: 1;
}
60%{
left: 800px;
bottom: 300px;
opacity: 0;
}
80%{
left: 1200px;
bottom: 100px;
opacity: 1;
}
100%{
left:800px;
bottom: -200px;
opacity: 0;
}
}
</style>
</head>
<body>
<ul>
<li>
<img src="img/photo.jpg"/>
</li>
<li>
<img src="img/p1.jpg">
</li>
<li>
<img src="img/p2.jpg">
</li>
<li>
<img src="img/p3.jpg">
</li>
<li>
<img src="img/p4.jpg">
</li>
<li>
<img src="img/p5.jpg">
</li>
</ul>
<img class="m" src="img/p1.jpg"/>
<audio src="video/蒲公英的約定.mp3" ?autoplay="autoplay" loop="loop"></audio>
</body>
</html>
