培训第二天，代码还不完善。
HTML文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--引入外部样式-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--盒子1-->
<div class="box1">
<img src="img/1.png"/>
<h1>第一个</h1>
<p class="p1">The one</p>
<p class="p2">The two</p>
<p class="p3">The three</p>
</div>
<!--盒子2-->
<div class="box2">
<img src="img/2.png"/>
<h1>第二个</h1>
<p class="p1">The one</p>
<p class="p2">The two</p>
<p class="p3">The three</p>
</div>
<!--盒子3-->
<div class="box3">
<img src="img/3.png"/>
<h1>第三个</h1>
<p class="p1">The one The one The one The one The one</p>
</div>
<!--盒子4-->
<div class="box4">
<img src="img/4.png"/>
<h1>1989</h1>
<p class="p1">The one The one </p>
<h2></h2>
</div>
<!--音乐-->
<img id='btn' class="btn" onclick="play(this)" src="img/musicBtn.png"/>
<audio id="music" autoplay="autoplay" src="Taylor Swift - We Are Never Ever Getting Back Together.mp3"></audio>
<!--盒子5-->
<div class="box5">
<img src="img/5.png"/>
<h1>第五个</h1>
<p class="p1">The one The one </p>
<div></div>
</div>
<!--盒子6-->
<div class="box6">
<img src="img/6.png"/>
<h1>第六个盒子</h1>
</div>
<!--盒子7-->
<div class="box7">
<img src="img/7.png"/>
<h1>第七个盒子</h1>
</div>
<!--盒子8-->
<div class="box8">
<img src="img/8.png"/>
<h1>第八个盒子</h1>
<div class="top"></div>
<div class="left"></div>
</div>
<!--盒子9-->
<div class="box9">
<img src="img/9.png"/>
</div>
</body>
</html>CSS文件如下：
@charset "utf-8";/*编码格式*/
*{
margin: 0;
padding: 0;
}
/*共同样式*/
div{
width: 33.3%;
height: 350px;
float: left;
/*溢出隐藏*/
overflow: hidden;
position: relative;/*相对定位*/
}
div img{
transition: all 1s;/*过渡*/
width:100%;
}
div:hover img{
/*透明度，属性值0-1,0是全透明，1是不透明*/
opacity: 0.5;
transform: translateX(50px);
}
/*第一个盒子样式*/
.box1 h1{
position: absolute;
top:50px;
left: 50px;
color: white;
font-size: 20px;
transition: all 0.8s 0.5s;
}
.box1:hover h1{
transform: translateX(30px);
}
.box1 p{
position: absolute;
left: 100px;
background: cornflowerblue;
width: 120px;
transition: all 0.8s;
}
.box1 .p1{
top:100px;
transform: translateY(500px);
}
.box1:hover .p1{
transform: translateY(0);
}
.box1 .p2{
top:150px;
transform: translateX(-500px);
}
.box1:hover .p2{
transform: translateX(0);
}
.box1 .p3{
top:200px;
transform: translateX(-500px);
}
.box1:hover .p3{
transform: translateX(0);
}
/*第二个盒子样式*/
.box2:hover img{
transform: translateX(-30px);
}
.box2 h1{
font-size: 20px;
color: white;
position: absolute;
top:50px;
left: 50px;
}
.box2 p{
position: absolute;
left: 100px;
background: white;
/*width: 120px;*/
}
.box2 .p1{
top:100px;
transform:translateX(-500px);
transition: all 1s;
}
.box2:hover .p1{
transform:translateX(0);
}
.box2 .p2{
top:150px;
transform:translateX(-500px);
transition: all 1s 0.2s;
}
.box2:hover .p2{
transform:translateX(0);
}
.box2 .p3{
top:200px;
transform:translateX(-500px);
transition: all 1s 0.4s;
}
.box2:hover .p3{
transform:translateX(0);
}
/*第三个盒子样式*/
.box3 h1{
font-size: 20px;
color: white;
position: absolute;
top:50px;
left: 50px;
transition: all 1s;
transform: translateY(-500px);
}
.box3:hover h1{
transform: translateY(0px);
}
.box3:hover img{
transform: translateY(-20px);
}
.box3 .p1{
position: absolute;
bottom:0;
left:80px;
transition: all 1s;
opacity: 0;
}
.box3:hover .p1{
opacity: 1;
bottom: 100px;
}
/*第四个盒子样式*/
.box4 h1{
font-size: 20px;
color: white;
position: absolute;
top:100px;
left: 20px;
transition: all 1s;
opacity: 0;
}
.box4:hover h1{
opacity: 1;
top:80px;
}
.box4 .p1{
position: absolute;
bottom:-300px;
right:80px;
z-index: 9;/*层级*/
transition: all 1s;
}
.box4:hover .p1{
bottom: 70px;
}
.box4 h2{
width: 150%;
height: 100%;
background: blue;
position: absolute;
top:100%;
left: 0;
transform: all 1s;
opacity: 0;
transform-origin: 0% 0%;
}
.box4:hover h2{
opacity: 1;
transform: rotate(-30deg);
}
/*音乐*/
#btn{
position: fixed;
right:50px;
top:30px;
width:50px;
}
.btn{
/*调用C3动画*/
animation: xuanZhuan 1s linear infinite;
}
/*定义C3动画*/
@keyframes xuanZhuan{
from{transform: rotate(0);}
to{transform: rotate(360deg);}
}
/*第五个盒子*/
.box5 h1{
font-size: 20px;
color: white;
position: absolute;
top:100px;
left: 20px;
transition: all 1s;
}
.box5:hover h1{
left: 120px;
}
.box5:hover img{
transform: translateX(0);
}
.box5 .p1{
position: absolute;
bottom:-50px;
left:80px;
opacity: 0;
transition: all 1s;
}
.box5:hover .p1{
opacity: 1;
bottom: 100px;
}
.box5 div{
position: absolute;
height:200px;
width:350px;
top:50px;
left: 50px;
background: rgba(0 0 0 0);/*透明背景*/
z-index: 9;/*层级*/
border: solid black 4px;
transform: rotate(0deg) translateY(-300px);
transition: all 3s;
}
.box5:hover div{
transform: rotate(360deg) translateY(0);
}
/*第六个盒子*/
.box6:hover img{
transform: translateX(0);
}
.box6 h1{
font-size: 25px;
position: absolute;
top:200px;
left: 120px;
transition: all 3s;
}
.box6:hover h1{
transform: rotate(360deg);
}
/*第七个盒子*/
.box7:hover img{
transform: scale(0.8);
}
/*第八个盒子*/
.box8:hover img{
transform: translateX(0);
}
.box8 .top{
position: absolute;
left: 125px;
top:70px;
width: 0;
height: 200px;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
transition: all 2s;
}
.box8:hover .top{
width: 240px;
}
.box8 .left{
position: absolute;
left:140px;
top:55px;
width: 200px;
height: 0px;
border-left: 2px solid #ccc;
border-right: 2px solid #ccc;
transition: all 2s;
}
.box8:hover .left{
height: 240px;
}
/*第九个盒子*/
.box9 img{
position:absolute;
transition: all 3s;
transform: rotate(0deg) scale(1);
}
.box9:hover img{
transform: rotate(10deg) scale(1.1);
}JS文件如下：
function play(img){
var music=document.getElementById('music');
/*播放或暂停*/
if(music.paused){
music.play();
img.src='img/musicBtn.png';
img.className='btn';
}else{
music.pause();
img.src='img/musicBtnOff.png';
img.className='';
}
}
