添加 'end.css'

end.css

@@ -0,0 +1,320 @@
+@import url(music.css);
+*{
+    margin: 0;
+    padding: 0;
+}
+#container{
+    width: 390px;
+    height: 844px;
+    margin: 0px auto;
+    background: url("../imags/background/back.png") no-repeat;
+    background-size: 390px 844px;
+    /* border: 1px solid rgb(240, 7, 7); */
+    position: relative;
+    border-radius: 30px;
+}    
+.container1{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+}
+.container1>div:first-child{
+    position: absolute;
+    left: 85px;
+    top: 165px;
+    z-index: 3;
+
+}
+.container1>div:first-child>img:hover{
+    transform: translate(0px,-10px);
+    /* box-shadow:0px 0px 5px 5px #f4f4f4; */
+
+}
+.container1>div:first-child>img{
+    width: 120px;
+    height: 130px;
+}
+
+.container1>div:last-child{
+    position: absolute;
+    left: 60px;
+    top: 130px;
+}
+.container1>div:last-child>img{
+    width: 30px;
+    height: 65px;
+}
+.container1>div:last-child>img:hover{
+    transform: translate(0px,-10px);
+}
+
+.container2{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+    position: absolute;
+    top: 250px;
+    left: 20px;
+}
+.container2>div:first-child{
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    z-index: 4;
+    /* border: 1px salmon solid; */
+}
+.container2>div:first-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container2>div:first-child>img{
+    width: 120px;
+    height: 160px;
+    /* border: 1px salmon solid; */
+}
+.container2>div:last-child{
+    position: absolute;
+    left:-7px;
+    top: -20px;
+    z-index: 5;
+    /* border: 1px salmon solid; */
+}
+.container2>div:last-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container2>div:last-child>img{
+    width: 30px;
+    height: 65px;
+    /* border: 1px salmon solid; */
+}
+
+
+.container3{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+    position: absolute;
+    top: 90px;
+    right: 30px;
+}
+.container3>div:first-child{
+    position: absolute;
+    right: 20px;
+    top: 0px;
+    /* border: 1px salmon solid; */
+}
+.container3>div:first-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container3>div:first-child>img{
+    width: 160px;
+    height: 180px;
+    /* border: 1px salmon solid; */
+}
+
+.container3>div:last-child{
+    position: absolute;
+    right:5px;
+    top:-10px;
+    /* border: 1px salmon solid; */
+}
+.container3>div:last-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container3>div:last-child>img{
+    width: 30px;
+    height: 65px;
+    /* border: 1px salmon solid; */
+}
+
+
+.container4{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+    position: absolute;
+    top: 250px;
+    right: 0px;
+}
+.container4>div:first-child{
+    position: absolute;
+    right: 10px;
+    top: -10px;
+    /* border: 1px salmon solid;*/
+}
+.container4>div:first-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container4>div:first-child>img{
+    width: 180px;
+    height: 150px;
+    /* border: 1px salmon solid; */
+}
+
+.container4>div:last-child{
+    position: absolute;
+    right:20px;
+    top: -30px;
+    /* border: 1px salmon solid; */
+}
+.container4>div:last-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container4>div:last-child>img{
+    width: 30px;
+    height: 65px;
+    /* border: 1px salmon solid; */
+}
+
+
+.container5{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+    position: absolute;
+    top:330px;
+    left: 100px;
+}
+.container5>div:first-child{
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    /* border: 1px salmon solid; */
+    z-index: 6;
+}
+.container5>div:first-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container5>div:first-child>img{
+    width: 170px;
+    height: 160px;
+    /* border: 1px salmon solid; */
+}
+
+.container5>div:last-child{
+    position: absolute;
+    left:145px;
+    bottom: 60px;
+    /* border: 1px salmon solid; */
+    z-index: 10;
+}
+.container5>div:last-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container5>div:last-child>img{
+    width: 30px;
+    height: 65px;
+    /* border: 1px salmon solid; */
+}
+
+.container6{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+    position: absolute;
+    bottom: 215px;;
+    left: 5px;
+}
+.container6>div:first-child{
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    /* border: 1px salmon solid; */
+    z-index: 10;
+}
+.container6>div:first-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container6>div:first-child>img{
+    width: 170px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+}
+
+.container6>div:last-child{
+    position: absolute;
+    left:5px;
+    bottom: 70px;
+    /* border: 1px salmon solid; */
+    z-index: 13;
+}
+.container6>div:last-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container6>div:last-child>img{
+    width: 30px;
+    height: 65px;
+    /* border: 1px salmon solid; */
+}
+
+
+.container7{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+    position: absolute;
+    bottom: 210px;;
+    right: 20px;
+}
+.container7>div:first-child{
+    position: absolute;
+    right: 0px;
+    bottom: 10px;
+    /* border: 1px salmon solid; */
+    z-index: 12;
+}
+.container7>div:first-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container7>div:first-child>img{
+    width: 180px;
+    height: 150px;
+    /* border: 1px salmon solid; */
+}
+
+.container7>div:last-child{
+    position: absolute;
+    right:25px;
+    bottom: 115px;
+    /* border: 1px salmon solid; */
+    z-index: 15;
+}
+.container7>div:last-child>img:hover{
+    transform: translate(0px,-10px);
+}
+.container7>div:last-child>img{
+    width: 30px;
+    height: 65px;
+    /* border: 1px salmon solid; */
+}
+.container8{
+    width: 200px;
+    height: 200px;
+    /* border: 1px salmon solid; */
+    position: absolute;
+    bottom:-35px;;
+    right: 155px;
+}
+.container8>div:first-child>a>img:hover{
+    transform: translate(0px,-10px);
+}
+/* .container8>div:first-child>a>img{
+
+     border: 1px salmon solid; 
+} */
+.container9{
+    position: absolute;
+    top:150px;
+    left:10px;
+    z-index: 20;
+    padding-top: 80px;
+    padding-bottom: 50px; 
+    display: none;
+}
+.container9>img{
+    width: 370px;
+    height: 300px;
+
+}
+#container:hover>div:last-child{
+    display: block;
+}