-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain_min.css
More file actions
4 lines (4 loc) · 17.4 KB
/
Copy pathmain_min.css
File metadata and controls
4 lines (4 loc) · 17.4 KB
1
2
3
4
*{padding:0;margin:0;text-decoration:none}a:hover{text-decoration:none}body{font-family:SimSun,Microsoft Yahei,Arial,serif;font-size:16px;letter-spacing:.1em;text-shadow:1px 1px .5px #202020;background:#f2f6f8;background:-moz-linear-gradient(top,rgba(242,246,248,1) 0,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 100%,rgba(224,239,249,1) 100%,rgba(181,198,208,1) 100%);background:-webkit-linear-gradient(top,rgba(242,246,248,1) 0,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 100%,rgba(224,239,249,1) 100%,rgba(181,198,208,1) 100%);background:linear-gradient(to bottom,rgba(242,246,248,1) 0,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 100%,rgba(224,239,249,1) 100%,rgba(181,198,208,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8',endColorstr='#b5c6d0',GradientType=0)}div{display:block}.begin_intro>p{font-family:KaiTi;width:90%;margin:20px auto 0;font-weight:bold;font-size:1.3em;color:#4caf50;padding:10px 0;border-bottom:2px solid #fe9f00;text-shadow:1px 1px 0 #202020}.begin_intro li p{font-weight:bold;font-size:1.1em;font-family:KaiTi;color:#202020;padding:10px 0;text-shadow:1px 1px 0 #202020}.test_voice:hover,#start_:hover{box-shadow:2px 2px 2px #f5f5f5}.test_voice,#start_{font-weight:bold;line-height:20px;padding:5px 10px 5px 5px;border:0;border-radius:5px;box-shadow:2px 2px 2px #202020}.test_voice{-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#4caf50}#start_{font-size:1.3em;margin-top:20px;width:160px;height:45px;background:#ff9800}.start_anim{-webkit-animation:change_ 1s ease-in-out infinite normal both;animation:change_ 1s ease-in-out infinite normal both}@-webkit-keyframes change_{0%{transform:scale(1)}50%{transform:scale(.8)}100%{transform:scale(1)}}@keyframes change_{0%{transform:scale(1)}50%{transform:scale(.8)}100%{transform:scale(1)}}#start_ img,.test_voice img{padding:0 5px 2px 5px}.progress-bar{font-size:16px}.bulet{letter-spacing:-1px;font-size:20px;font-family:Arial;color:#4caf50;padding-right:3px}.blink_{box-shadow:2px 2px 2px #202020}.blink_anim{-webkit-animation:blink_ 1.5s ease-in-out 1 normal both;animation:blink_ 1.5s ease-in-out 1 normal both}.con_blink{opacity:0;position:absolute}.con_blink_anim{-webkit-animation:con_blink 1s ease-in-out .5s 1 normal both;animation:con_blink 1s ease-in-out .5s 1 normal both}@-webkit-keyframes blink_{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}@keyframes blink_{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}@-webkit-keyframes con_blink{0%{opacity:0}33%{opacity:1}66%{opacity:0}100%{opacity:1}}@keyframes con_blink{0%{opacity:0}33%{opacity:1}66%{opacity:0}100%{opacity:1}}.con_blink_1{-webkit-transform:translateX(-155px);transform:translateX(-155px)}.con_blink_2{-webkit-transform:translateX(-150px);transform:translateX(-150px)}.ear_{box-shadow:2px 2px 2px #202020}.hover__{opacity:0;top:321px;position:absolute;box-shadow:2px 2px 2px #202020}.hover__anim{-webkit-animation:hover___ 1s linear 1 normal both;animation:hover___ 1s linear 1 normal both}@-webkit-keyframes hover___{0%{-webkit-transform:translateX(-130px);transform:translateX(-130px);opacity:.5}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:0}100%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}}@keyframes hover___{0%{-webkit-transform:translateX(-130px);transform:translateX(-130px);opacity:.5}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:0}100%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}}.ear_anim{-webkit-animation:blink___ 1s linear .8s 1 normal both;animation:blink___ 1s linear .8s 1 normal both}@-webkit-keyframes blink___{0%{opacity:.2}100%{opacity:1}}@keyframes blink___{0%{opacity:.2}100%{opacity:1}}.container{margin:0 auto;width:100%;height:700px;position:relative}.inner_container{position:relative;width:90.2%;top:45px;background:#f5f5f5;margin:0 auto;height:630px;border-radius:30px/5px;border:1px solid #ffc107;box-shadow:3px 3px 3px #202020,-2px 0 2px #606060}.header_title{background:#e0e0e0;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:auto;text-align:center;display:table;padding:0 30px;border-radius:20px;box-shadow:-2px -2px 3px #000 inset,2px 2px 3px #000 inset}.title{letter-spacing:-2px;font-family:Arial;font-size:1.1em;font-weight:bolder;line-height:40px;display:table-cell;vertical-align:middle;text-shadow:3px 3px 3px #212121}.main_content{position:absolute;width:100%;left:50%;text-align:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.begin_intro ul{list-style:none}.a{animation:changea 5s ease-in-out infinite both}.b{animation:changeb 5s ease-in-out infinite forwards}.c{animation:changec 5s ease-in-out infinite forwards}.d{animation:changed 5s ease-in-out infinite forwards}
.e{animation:changee 5s ease-in-out infinite forwards}.f{animation:changef 5s ease-in-out infinite forwards}.g{animation:changeg 5s ease-in-out infinite forwards}.h{animation:changeh 5s ease-in-out infinite forwards}.i{animation:changei 5s ease-in-out infinite forwards}.j{animation:changej 5s ease-in-out infinite forwards}.k{animation:changek 5s ease-in-out infinite forwards}.l{animation:changel 5s ease-in-out infinite forwards}.m{animation:changem 5s ease-in-out infinite forwards}.n{animation:changen 5s ease-in-out infinite forwards}.o{animation:changeo 5s ease-in-out infinite forwards}.p{animation:changep 5s ease-in-out infinite forwards}.q{animation:changeq 5s ease-in-out infinite forwards}.r{animation:changer 5s ease-in-out infinite forwards}@keyframes changea{0%{color:#ff5252}25%{color:#ff1744}50%{color:#d50000}75%{color:#ff1744}100%{color:#ff5252}}@keyframes changeb{0%{color:#ff4081}25%{color:#f50057}50%{color:#c51162}75%{color:#f50057}100%{color:#ff4081}}@keyframes changec{0%{color:#e040fb}25%{color:#d500f9}50%{color:#a0f}75%{color:#d500f9}100%{color:#e040fb}}@keyframes changed{0%{color:#7c4dff}25%{color:#651fff}50%{color:#6200ea}75%{color:#651fff}100%{color:#7c4dff}}@keyframes changee{0%{color:#536dfe}25%{color:#3d5afe}50%{color:#304ffe}75%{color:#3d5afe}100%{color:#536dfe}}@keyframes changef{0%{color:#448aff}25%{color:#2979ff}50%{color:#2962ff}75%{color:#2979ff}100%{color:#448aff}}@keyframes changeg{0%{color:#40c4ff}25%{color:#00b0ff}50%{color:#0091ea}75%{color:#00b0ff}100%{color:#40c4ff}}@keyframes changeh{0%{color:#18ffff}25%{color:#00e5ff}50%{color:#00b8d4}75%{color:#00e5ff}100%{color:#18ffff}}@keyframes changei{0%{color:#64ffda}25%{color:#1de9b6}50%{color:#00bfa5}75%{color:#1de9b6}100%{color:#64ffda}}@keyframes changej{0%{color:#69f0ae}25%{color:#00e676}50%{color:#00c853}75%{color:#00e676}100%{color:#69f0ae}}@keyframes changek{0%{color:#b2ff59}25%{color:#76ff03}50%{color:#64dd17}75%{color:#76ff03}100%{color:#b2ff59}}@keyframes changel{0%{color:#eeff41}25%{color:#c6ff00}50%{color:#aeea00}75%{color:#c6ff00}100%{color:#eeff41}}@keyframes changem{0%{color:#ff0}25%{color:#ffea00}50%{color:#ffd600}75%{color:#ffea00}100%{color:#ff0}}@keyframes changen{0%{color:#ffd740}25%{color:#ffc400}50%{color:#ffab00}75%{color:#ffc400}100%{color:#ffd740}}@keyframes changeo{0%{color:#ffab40}25%{color:#ff9100}50%{color:#ff6d00}75%{color:#ff9100}100%{color:#ffab40}}@keyframes changep{0%{color:#ff6e40}25%{color:#ff3d00}50%{color:#dd2c00}75%{color:#ff3d00}100%{color:#ff6e40}}@keyframes changeq{0%{color:#ff5252}25%{color:#ff1744}50%{color:#d50000}75%{color:#ff1744}100%{color:#ff5252}}@keyframes changer{0%{color:#fbc02d}25%{color:#f9a825}50%{color:#f57f17}75%{color:#f9a825}100%{color:#fbc02d}}.progress{position:absolute;display:none;width:60%;top:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.eye_test_intro>p{display:block;padding:0}.test_content_1,.result{display:none;position:relative}b{font-weight:normal;font-size:16px;line-height:35px}#title2{font-size:1.2em;color:#4caf50}.photos{display:block;position:relative;margin:0 auto;border:1px solid #fe9f00;cursor:pointer}#photo2{margin-top:2px}#slide_down{position:absolute;top:30px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:none;-webkit-perspective:1000px;perspective:1000px;text-align:center;z-index:889}.slide{background:#f5f5f5;width:260px;height:410px;border-radius:5px 5px;box-shadow:2px 2px 2px #202020,-2px 0 2px #202020;z-index:889}.music_spinner{width:100%;height:340px}.center1,.center2,.center3{display:block;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.center1{top:66px}#spinner{border:4px solid rgba(215,215,215,.8);border-radius:130px 130px;padding-left:1px}.center3{top:128px}#play_bt:hover{cursor:pointer}.play_bt_anim{-webkit-animation:glow .5s ease-in-out infinite normal both;animation:glow .5s ease-in-out infinite normal both}@-webkit-keyframes glow{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes glow{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}#rule{color:#fe9f00;position:absolute;top:40%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}#cover{text-align:center;position:absolute;width:100%;height:630px;border-radius:30px/5px;background-size:contain;background:url(music_photo/background_.jpg) no-repeat;z-index:667;display:none}#start_2{position:absolute;top:30%;display:none}#hint{width:90%;color:#fe9f00;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:25%}.hint_2{text-shadow:1px 1px 2px #202020;font-weight:bold;width:90%;margin:0 auto;color:#f44336;padding-top:45%;display:none}.hint_2_anim{-webkit-animation:bounce_in 1s ease-in 1 normal both;animation:bounce_in 1s ease-in 1 normal both}@-webkit-keyframes bounce_in{0%{-webkit-transform:translateY(-200px);opacity:0}90%{-webkit-transform:translateY(8px);opacity:1}100%{-webkit-transform:translateY(0px)}
}@keyframes bounce_in{0%{-webkit-transform:translateY(-200px);opacity:0}90%{-webkit-transform:translateY(8px);opacity:1}100%{-webkit-transform:translateY(0px)}}#start_bnt{font-family:KaiTi;font-weight:bolder;font-size:25px;opacity:1;top:40%;-webkit-transform:translateX(-50%);transform:translateX(-50%);position:absolute;width:200px;height:50px;color:#fe9f00;background:#202020;border-radius:20px 20px;border:2px solid #fe9f00;text-shadow:1px 1px 2px #202020;box-shadow:5px 5px 3px #202020}a:first-child{margin-top:20px}.choice{letter-spacing:.2em;line-height:30px;font-size:.8em;margin-top:10px;width:150px;border-radius:10px 10px;color:#f5f5f5;border:0;text-shadow:1px 1px 2px #202020;box-shadow:1px 1px 2px #202020}#choiceA{margin-top:20px;background:#8bc34a}#choiceB{background:#ff5722}#choiceC{background:#03a9f4}#choiceD{background:#ff9800}.choice:disabled{background-color:#b6b5b6!important}@-webkit-keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.arrow{padding-left:10px}.arrow:hover{cursor:pointer}.arrow_anim{-webkit-animation:flowing 1s ease-in-out infinite backwards;animation:flowing 1s ease-in-out infinite backwards}@-webkit-keyframes flowing{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes flowing{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.animatedFast{-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.slideDown{-webkit-transform-origin:top right;transform-origin:top right;-webkit-animation:slideDown .5s cubic-bezier(0.250,0.360,0.450,0.940) 1 normal both;animation:slideDown .5s cubic-bezier(0.250,0.360,0.450,0.940) 1 normal both}@-webkit-keyframes slideDown{from{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}to{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}@keyframes slideDown{from{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}to{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}.rotate_bar{-webkit-transform-origin:29px 25px;transform-origin:29px 25px;-webkit-animation:rotate_ .5s linear 1 normal both;animation:rotate_ .5s linear 1 normal both}@-webkit-keyframes rotate_{from{-webkit-transform:rotateY(-60deg);transform:rotateY(-60deg)}to{-webkit-transform:rotateZ(-35deg);transform:rotateZ(-35deg)}}@keyframes rotate_{from{-webkit-transform:rotateZ(-60deg);transform:rotateZ(-60deg)}to{-webkit-transform:rotateZ(-35deg);transform:rotateZ(-35deg)}}#bar{-webkit-transform-origin:29px 25px;transform-origin:29px 25px;-webkit-transform:rotateZ(-60deg);transform:rotateZ(-60deg)}.spinning{-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-animation:spin 20s linear .6s infinite normal backwards;animation:spin 20s linear .6s infinite normal backwards}@-webkit-keyframes spin{from{-webkit-transform:rotateZ(-360deg);transform:rotateZ(-360deg)}to{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}}@keyframes spin{from{-webkit-transform:rotateZ(-360deg);transform:rotateZ(-360deg)}to{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}}.result{width:80%;margin:0 auto}.result_title>p{line-height:50px;font-size:1.3em;font-weight:bold;color:#202020;border-bottom:1px solid #202020}.final_perct>p{width:240px;margin:0 auto;line-height:26px;padding-bottom:16px;padding-left:5px;font-weight:normal;color:#202020;background:url(music_photo/background.png) no-repeat}.perctenge{font-weight:bold;font-size:1.3em;color:#fe9f00;padding:0 3px}.final_score{font-weight:bolder;font-size:3em;color:#fe9f00}.final_perct{margin-top:10px}.detail>p{line-height:40px;font-weight:bold;font-size:1.3em;border-bottom:1px solid #202020;margin:15px 0}div label{line-height:40px;text-align:center;display:inline-block;background:#e0e0e0;color:#f5f5f5;width:70px;height:40px;margin-left:5px;border-radius:5px 5px}.highlighted{background:#fe9f00;box-shadow:3px 3px 2px #202020}#follow{font-family:SimSun;font-size:1.1em;font-weight:bold;color:#f5f5f5;line-height:43px;text-align:center;text-shadow:1px 1px 1px #202020;margin:25px 0 10px 0;width:150px;height:43px;border-radius:10px 10px;border:0;box-shadow:1px 1px 2px #202020;background:#4caf50}
#follow img{margin-left:-10px;padding-right:5px;padding-bottom:3px}#QR{display:none;position:absolute;top:150px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:1000}#GitHub{margin:0 auto}#busuanzi_container_site_uv{display:block;width:185px;margin:0 auto;padding:10px 0}#busuanzi_container_site_uv span{color:#4caf50;text-shadow:1px 1px 1px #202020}@media only screen and (max-width:320px){.header_title{font-size:.8em}.blink_,.con_blink{width:125px;height:125px}.con_blink_1{-webkit-transform:translateX(-130px);transform:translateX(-130px)}.con_blink_2{-webkit-transform:translateX(-125px);transform:translateX(-125px)}.ear_{width:250px;height:125px;box-shadow:2px 0 2px #202020}.hover__{top:294px;height:125px;box-shadow:2px 2px 2px #202020}.hover__anim{-webkit-animation:hover___ 1s linear 1 normal both;animation:hover___ 1s linear 1 normal both}@-webkit-keyframes hover___{0%{-webkit-transform:translateX(-110px);transform:translateX(-110px);opacity:.5}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:0}100%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}}@keyframes hover___{0%{-webkit-transform:translateX(-110px);transform:translateX(-110px);opacity:.5}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:0}100%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:1}}#line_m{display:none}.detail label{width:50px}.result{font-size:.8em}b{font-size:12px}}#popupParis{position:absolute;z-index:1002;left:50%;top:50px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.popphoto{z-index:1003}#shut{position:absolute;top:12px;right:3%;z-index:1001;width:34px;height:34px;border-radius:17px 17px;border:2px solid #f5f5f5;background:url(music_photo/shut.png) no-repeat center center}@media only screen and (max-width:330px){#cover{background-size:100% 100%;background:url(music_photo/background_small.jpg) no-repeat}.popphoto{width:310px}}@media only screen and (min-width:331px) and (max-width:380px){#cover{background-size:100% 100%;background:url(music_photo/background_middle.jpg) no-repeat}.popphoto{width:360px}}@media only screen and (min-width:381px) and (max-width:420px){#cover{background-size:100% 100%;background:url(music_photo/background_big.jpg) no-repeat}.popphoto{width:390px}}@media only screen and (min-width:779px){#cover{background-size:100% 100%;background:url(music_photo/background_.jpg) no-repeat}.popphoto{width:400px;height:630px}}