上传文件至 'css'

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;
+}

css/fei.css

@@ -0,0 +1,109 @@
+@import url(music.css);
+@import url(saying.css);
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+#container {
+    width: 390px;
+    height: 844px;
+    margin: 0px auto;
+    background: url('../imags/background/back3.png') no-repeat;
+    background-size: 390px 844px;
+    /* border: 1px solid rgb(240, 7, 7); */
+    position: relative;
+    border-radius: 30px;
+}
+
+.container1 {
+    position: absolute;
+    left: 70px;
+    top: 180px;
+    /* border: 1px solid rgb(240, 7, 7); */
+}
+
+.container1 p {
+    font-family: 'SONG';
+    font-size: 20px;
+    color: black;
+    text-align: center;
+    line-height: 30px;
+    letter-spacing: 5px;
+}
+
+.container1 p span {
+    color: rgb(116, 48, 67);;
+}
+
+.container2 {
+    position: absolute;
+    left: 90px;
+    top: 350px;
+    /* border: 1px solid rgb(240, 7, 7); */
+}
+
+.container2>div>img {
+    width: 200px;
+    height: 160px;
+}
+
+.container3 {
+    position: absolute;
+    left: 105px;
+    bottom: 80px;
+    /* border: 1px solid rgb(240, 7, 7); */
+}
+
+.container3>div:first-child {
+    /* border: 1px solid rgb(240, 7, 7); */
+    margin-left: 10px;
+}
+
+.container3>div:nth-child(2) {
+    /* border: 1px solid rgb(240, 7, 7); */
+    margin-left: 10px;
+}
+
+.container3>div:last-child {
+    /* border: 1px solid rgb(240, 7, 7); */
+    margin-left: 10px;
+}
+
+.container3>div>img {
+    width: 150px;
+    height: 70px;
+    cursor: pointer;
+    /*鼠标手型改变*/
+    transition: 0.3s ease-in-out;
+    /*过渡时间：持续的时间  规定以慢速开始和结束，先加速后减速效果*/
+}
+
+.container3>div>img:hover {
+    transform: scale(1.2);
+}
+
+#correct,
+#wrong {
+    position: absolute;
+    z-index: 100;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 500px;
+}
+
+.back img {
+    position: absolute;
+    top: 0px;
+    left: 5px;
+    width: 80px;
+    cursor: pointer;
+}
+.go img {
+    position: absolute;
+    width: 100px;
+    cursor: pointer;
+    bottom: 0px;
+    right: 10px;
+}

css/fei2.css

@@ -0,0 +1,262 @@
+@import url(music.css);
+@import url(saying2.css);
+*{
+    margin: 0;
+    padding: 0;
+}
+#container{
+    width: 390px;
+    height: 844px;
+    margin: 0px auto;
+    background: url("../imags/background/back3.png") no-repeat;
+    background-size: 390px 844px;
+    /* border: 1px solid rgb(240, 7, 7); */
+    position: relative;
+    border-radius: 30px;
+}
+
+/* .container1{
+    width: 500px;
+    height: 400px; 
+} */
+
+.container1>div{
+    position: absolute;
+}
+.container1>div:first-child{
+    top: 185px;
+    left: 50px;
+}
+.container1>div:last-child{
+    top: 180px;
+    right: 65px;
+}
+.container1>div:first-child>img{
+    width: 110px;
+    height: 140px;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+}
+.container1>div:first-child:hover>img{
+    transform: scale(1.2);
+}
+.container1>div:last-child>img{
+    width: 150px;
+    height: 150px;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+}
+.container1>div:last-child:hover>img{
+    transform: scale(1.2);
+}
+
+.word-container {
+    position: relative;
+    margin: auto;
+    width: 280px;
+    height: 70px;
+    background: url("../imags/word2/back3.jpg") no-repeat center center;
+    background-size: 100% 100%;
+
+    top:370px
+}
+.word {
+    width: 240px;
+    height: 100%;
+    margin: auto;
+}
+
+#word1,
+#word2,
+#word3,
+#word4 {
+    float: left;
+    width: 60px;
+    height: 60px;
+    margin-left: 14px;
+}
+
+#word1{
+    background: url("../imags/word2/word3-1.jpg") no-repeat center bottom;
+    background-size: 100% 60%;
+}
+
+#word2{
+    background: url("../imags/word2/word3-2.jpg") no-repeat center bottom;
+    background-size: 100% 60%;
+}
+
+#word3{
+    background: url("../imags/word2/word3-3.jpg") no-repeat center bottom;
+    background-size: 100% 60%;
+}
+
+
+.container2{
+    position: relative;
+    top:370px
+}
+.container2_1{
+    margin: auto;
+    padding: auto;
+    width: 320px;
+    height: 90px;
+    background: url("../imags/background/a2.png") no-repeat;
+    background-size: 310px 90px; /*必须设置大小*/
+}
+.container2_1>div:first-child{
+    position: absolute;
+    top: 20px;
+    left: 50px;
+}
+.container2_1>div:first-child>p{
+    font-size: 32px;
+    font-family: 'SONG';
+    font-weight: 400;
+    color: white;
+    line-height: 40px;
+    letter-spacing: 8px;
+    margin-left: 18px;
+    margin-top: 5px;
+}
+.container2_1>div:last-child{
+    position: absolute;
+    top: 20px;
+    right: 50px;
+}
+.container2_1>div:last-child>p{
+    font-size: 20px;
+    font-family: '楷体';
+    color: white;
+    line-height: 40px;
+    /* letter-spacing: 5px; */
+    margin-right: 13px;
+    margin-top: 5px;
+}
+
+
+.container2_2{
+    margin-left: 40px;
+    padding: auto;
+    width: 320px;
+    height: 90px;
+    background: url("../imags/background/a1.png") no-repeat;
+    background-size: 310px 90px; /*必须设置大小*/
+    position: relative;
+}
+.container2_2>div:first-child{
+    position: absolute;
+    top: 20px;
+    left: 10px;
+}
+.container2_2>div:first-child>p{
+    font-size: 32px;
+    font-family: 'SONG';
+    font-weight: 400;
+    color: white;
+    line-height: 40px;
+    letter-spacing: 8px;
+    margin-left: 18px;
+    margin-top: 5px;
+}
+.container2_2>div:last-child{
+    position: absolute;
+    top: 20px;
+    right: 90px;
+}
+.container2_2>div:last-child>p{
+    font-size: 20px;
+    font-family: '楷体';
+    color: white;
+    line-height: 40px;
+    /* letter-spacing: 5px; */
+    margin-right: 13px;
+    margin-top: 5px;
+}
+
+
+
+.container2_3{
+    margin-left: 35px;
+    padding: auto;
+    width: 320px;
+    height: 90px;
+    background: url("../imags/background/a2.png") no-repeat;
+    background-size: 310px 90px; /*必须设置大小*/
+    position: relative;
+}
+.container2_3>div:first-child{
+    position: absolute;
+    top: 20px;
+    left: 15px;
+}
+.container2_3>div:first-child>p{
+    font-size: 32px;
+    font-family: 'SONG';
+    font-weight: 400;
+    color: white;
+    line-height: 40px;
+    letter-spacing: 8px;
+    margin-left: 18px;
+    margin-top: 5px;
+}
+.container2_3>div:last-child{
+    position: absolute;
+    top: 20px;
+    right: 65px;
+}
+.container2_3>div:last-child>p{
+    font-size: 20px;
+    font-family: '楷体';
+    color: white;
+    line-height: 40px;
+    /* letter-spacing: 5px; */
+    margin-right: 13px;
+    margin-top: 5px;
+}
+
+.container2_4{
+    margin-left: 40px;
+    padding: auto;
+    width: 320px;
+    height: 90px;
+    background: url("../imags/background/a1.png") no-repeat;
+    background-size: 310px 90px; /*必须设置大小*/
+    position: relative;
+}
+.container2_4>div:first-child{
+    position: absolute;
+    top: 20px;
+    left: 10px;
+}
+.container2_4>div:first-child>p{
+    font-size: 32px;
+    font-family: 'SONG';
+    font-weight: 400;
+    color: white;
+    line-height: 40px;
+    letter-spacing: 8px;
+    margin-left: 18px;
+    margin-top: 5px;
+}
+.container2_4>div:last-child{
+    position: absolute;
+    top: 20px;
+    right: 60px;
+}
+.container2_4>div:last-child>p{
+    font-size: 20px;
+    font-family: '楷体';
+    color: white;
+    line-height: 40px;
+    /* letter-spacing: 5px; */
+    margin-right: 22px;
+    margin-top: 5px;
+}
+.back img {
+    position: absolute;
+    top: 0px;
+    left: 5px;
+    width: 80px;
+    cursor: pointer;
+}

css/index.css

@@ -0,0 +1,82 @@
+@import url(music.css);
+.container {
+    position: relative;
+    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;
+}
+
+.container2 {
+    position: absolute;
+    top: 70px;
+    animation: tittlemove alternate infinite 3s ease-in-out;
+}
+
+.container2 img {
+    width: 390px;
+}
+
+.word{
+    position: absolute;
+    top:330px;
+    left:-31px;
+}
+.word>img{
+    width:450px;
+    height: 350px;
+    animation: tittlemove3 alternate infinite 1.5s ease-in-out;
+}
+
+.container3 img {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+    bottom: 50px;
+    cursor: pointer;
+    animation: tittlemove2 alternate infinite 4s ease-in-out;
+
+}
+
+.container4 img {
+    position: absolute;
+    width: 70px;
+    bottom: 140px;
+    left: 40px;
+}
+
+@keyframes tittlemove {
+    0% {}
+    50% {
+        transform: translateY(-5px);
+    }
+    100% {
+        transform: translateY(5px);
+    }
+}
+
+@keyframes tittlemove2 {
+    0% {
+        transform: translateX(-50%);
+    }
+    50% {
+        transform: translate(-50%,-5px);
+    }
+    100% {
+        transform: translate(-50%,5px);
+    }
+}
+
+@keyframes tittlemove3 {
+    0% {}
+    50% {
+        transform: translateY(-5px);
+    }
+    100% {
+        transform: translateY(5px);
+    }
+}

css/jiao.css

@@ -0,0 +1,148 @@
+@import url(music.css);
+@import url(saying.css);
+.u-audio2{
+    top: 430px;
+}
+* {
+    margin: 0;
+    padding: 0;
+}
+
+#container {
+    width: 390px;
+    height: 844px;
+    margin: 0px auto;
+    background: url('../imags/background/back3.png') no-repeat;
+    background-size: 390px 844px;
+    /* border: 1px solid rgb(240, 7, 7); */
+    position: relative;
+    border-radius: 30px;
+}
+
+.container1 {
+    position: absolute;
+    left: 45px;
+    top: 180px;
+    /* border: 1px solid rgb(240, 7, 7); */
+}
+
+.container1 p {
+    font-family: 'SONG';
+    font-size: 20px;
+    color: black;
+    text-align: center;
+    line-height: 30px;
+    letter-spacing: 5px;
+}
+
+.container1 p span {
+    color: rgb(116, 48, 67);;
+    font-family: 'SONG';
+}
+
+.container2 {
+    position: absolute;
+    left: 105px;
+    top: 350px;
+    /* border: 1px solid rgb(240, 7, 7); */
+}
+
+.container2>div:first-child>img {
+    width: 180px;
+    height: 200px;
+}
+
+.container2>div:last-child>p {
+    font-family: 'SONG';
+    font-size: 15px;
+    color: black;
+    text-align: center;
+    line-height: 30px;
+    letter-spacing: 5px;
+}
+.container2>div:first-child>div>img{
+    width: 200px;
+    height: 120px;
+    border-radius: 20px;
+}
+.container2>div:first-child>div{
+    display: none;
+    position: absolute;
+    top: 30px;
+    left: -10px;
+    /* border: 1px saddlebrown solid; */
+}
+.container2>div:first-child:active>div{
+    display: block;
+}
+
+.container3 {
+    position: absolute;
+    left: 35px;
+    bottom: 150px;
+    /* border: 1px solid rgb(240, 7, 7); */
+}
+
+.container3>div {
+    float: left;
+    /* border: 1px solid rgb(240, 7, 7); */
+    margin-left: 8px;
+}
+
+.container3>div:first-child {
+    margin-left: 0px;
+}
+
+.container3>div:nth-child(2) {
+    margin-left: 0px;
+}
+
+.container3>div:last-child {
+    margin-left: 0px;
+}
+
+.container3 .Puzzle {
+    position: relative;
+    width: 50px;
+    height: 40px;
+    cursor: pointer;
+    /*鼠标手型改变*/
+    /*过渡时间：持续的时间  规定以慢速开始和结束，先加速后减速效果*/
+}
+
+.container3>div>img:hover {
+    transform: scale(1.2);
+}
+
+#submit img {
+    position: absolute;
+    width: 150px;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 80px;
+    cursor: pointer;
+}
+
+#correct,
+#wrong {
+    position: absolute;
+    z-index: 100;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 500px;
+}
+
+.back img {
+    position: absolute;
+    top: 0px;
+    left: 5px;
+    width: 80px;
+    cursor: pointer;
+}
+.go img {
+    position: absolute;
+    width: 100px;
+    cursor: pointer;
+    bottom: 0px;
+    right: 10px;
+}