christmas
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣诞礼物</title>
  <link rel="stylesheet" href="./main.css">
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
  <div id="header">
    <p class="enclosed"></p>
    <button id="startButton">点击 查收<span style='color: red'>❤</span></button>
  </div>
  <div id="Obscuration">
      <ul>
        <li><img src="./image/01.jpg" alt=""></li>
        <li><img src="./image/02.jpeg" alt=""></li>
        <li><img src="./image/03.jpeg" alt=""></li>
        <li><img src="./image/04.jpg" alt=""></li>
        <li><img src="./image/05.jpg" alt=""></li>
        <li><img src="./image/06.jpg" alt=""></li>
    </ul>
  </div>
  <audio src="./christmas.mp3" controls id="music">
  </audio>
</body>
<style>
  .enclosed {
      padding: 5px 30px;
      text-align: center;
    }
  #music{
    display: none;
  }
  #Obscuration {
    position: absolute;
  	width: 100%;
  	height: 100%;
  	display: none;
      perspective: 1000px;
      z-index: 99;
      /* background-color: #fff; */
      background: url(./image/chbja1.jpg) no-repeat;
	    background-size: 100% 100%;

  }
  #header{
      background: url(./image/chbja.jpg) no-repeat;
	    background-size: 100% 100%;
  }

ul {
	position: relative;
	margin: 300px auto;
	width: 150px;
	height: 150px;
	/* border: 4px solid #1a1; */
	animation: xuanzhuan 10s linear infinite;
	transform-style: preserve-3d;
}

li {
	list-style: none;
	position: absolute;
}
img{
	width: 250px;
	height: 300px;
}

li:nth-child(1) {
	transform: translateZ(300px);
}

li:nth-child(2) {
	transform: rotateY(60deg) translateZ(300px);
}

li:nth-child(3) {
	transform: rotateY(120deg) translateZ(300px);
}

li:nth-child(4) {
	transform: rotateY(180deg) translateZ(300px);
}

li:nth-child(5) {
	transform: rotateY(240deg) translateZ(300px);
}

li:nth-child(6) {
	transform: rotateY(300deg) translateZ(300px);
}

@keyframes xuanzhuan {
	to {
		transform: rotateY(360deg);
	}
}

ul:hover {
	animation-play-state: paused;
}
</style>
<script src="./jquery-2.1.4.min.js"></script>
<script src="./typeit.js"></script>
<script src="./index.js"></script>
</html>