修改并压缩代码

css/style.css

@@ -1,342 +1 @@
-@charset "utf-8";
+@charset "utf-8";html,body,div,section,header,footer,button,input,textarea,p,ul,li{margin:0;padding:0;box-sizing:border-box;font-family:Microsoft Yahei,"微软雅黑","Helvetica Neue",Helvetica,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif}img{outline:none}html,body{width:100%;height:100%;overflow-x:hidden}#search{position:relative;height:40%;min-height:314px;max-height:510px;margin:0 auto;text-align:center}#search-form{position:absolute;width:100%;bottom:0}.search-form-group{position:relative;max-width:655px;margin:0 auto}.search-form-input{position:absolute;left:0;right:108px;vertical-align:top;overflow:hidden}@media screen and (min-width:650px){.search-form-input input{width:100%;height:44px;padding:12px 16px;font-size:16px;outline:0;box-shadow:none;border-radius:10px 0 0 10px;border:2px solid #c4c7ce;border-right:none;background:#fff;color:#222}.search-form-group button{cursor:pointer;width:108px;height:44px;line-height:45px;padding:0;background:#4e6ef2;border-radius:0 10px 10px 0;font-size:17px;color:#fff;box-shadow:none;font-weight:400;border:none;outline:0;float:right;z-index:1}}@media screen and (max-width:650px){.search-form-input input{width:100%;height:49px;padding:12px 16px;font-size:16px;outline:0;box-shadow:none;border-radius:10px 0 0 10px;border:2px solid #c4c7ce;border-right:none;background:#fff;color:#222}.search-form-group button{cursor:pointer;width:108px;height:49px;line-height:45px;padding:0;background:#4e6ef2;border-radius:0 10px 10px 0;font-size:17px;color:#fff;box-shadow:none;font-weight:400;border:none;outline:0;float:right;z-index:1}}@media screen and (max-width:650px){.search-form-input{right:81px}.search-form-group button{width:81px}}.search-form-group input:hover{border-color:#9195a3}.search-form-group input:focus{border-color:#4e6ef2}.search-form-group button:active{background-color:#4662d9}.search-form-group button:hover{background-color:#4662d9}.search-header{position:absolute;bottom:60px;width:100%}.search-header h2{font-size:24px;font-weight:900}.search-header img{display:inline-block;width:270px;margin:0 -12px -16px}#function{position:absolute;width:100%;min-height:220px;text-align:center;margin-top:80px}#tips{color:#9195a3;font-size:16px}#output{display:none;width:100%;max-width:400px;margin:20px auto}#output textarea{width:100%;padding:5px 8px;border-radius:3px;border:1px solid #c8c8c8;outline:none;word-break:break-all}#output textarea:focus{border-color:#4285f4;box-shadow:0 0 2px #4285f4}#output .tool-btns{text-align:right;margin-top:8px}#output button{outline:none;cursor:pointer;color:#fff;background:#3f89ec;border:none;margin-left:8px;padding:6px 14px;border-radius:3px}#output button:hover{background:#4490f7}#output button:focus{background:#3a84e8}#footer{width:100%;position:fixed;z-index:100;bottom:0;left:0;height:40px;line-height:40px;font-size:12px;overflow:hidden;background-color:#fafafa;padding:0 20px}#footer li{list-style:none;display:inline-block;padding:0 10px}.footer-left,.footer-left a{color:#9195a3;text-decoration:none}.footer-right{float:right}.footer-right,.footer-right a{color:#bbb}#arrow{display:none;position:absolute;left:0;top:0;width:50px;height:50px;z-index:999;background:url(../img/arrow.png) no-repeat}#arrow::after{content:'';position:absolute;top:-13px;left:-15px;z-index:-1;border-radius:9em;box-shadow:0 0 0 7px rgba(0,0,0,.4);width:30px;height:30px;opacity:0}#arrow.active::after{-webkit-animation:bubble-scale 1s ease;animation:bubble-scale 1s ease}@-webkit-keyframes bubble-scale{from{transform:scale(0);opacity:1}to{transform:scale(2);opacity:0}}@keyframes bubble-scale{from{transform:scale(0);opacity:1}to{transform:scale(2);opacity:0}}@media screen and (max-width:650px){#search{margin:0 10px;height:auto;min-height:200px}.search-header img{width:180px;margin:0 -16px -12px}#search-form{bottom:10px}#function{position:relative;top:0;margin-top:50px;padding:0 10px}#stop{margin-top:30px}#footer{padding:0}#arrow{background:url(../img/hand.png) no-repeat}}
-
-html, body, 
-div, section, header, footer,
-button, input, textarea,
-p, ul, li {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
-} 
-
-img {
-    outline: none;
-}
-
-html, body {
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-}
-
-
-/* 搜索框 */
-#search {
-    position: relative;
-    height: 40%;
-    min-height: 314px;
-    max-height: 510px;
-    margin: 0 auto;
-    text-align: center;
-}
-
-#search-form {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-}
-
-.search-form-group {
-    position: relative;
-    max-width: 655px;
-    margin: 0 auto;
-}
-
-.search-form-input {
-    position: absolute;
-    left: 0;
-    right: 108px;
-    vertical-align: top;
-    overflow: hidden;
-}
-
-.search-form-input input {
-    width: 100%;
-    height: 44px;
-    padding: 12px 16px;
-    font-size: 16px;
-    outline: 0;
-    box-shadow: none;
-    border-radius: 10px 0 0 10px;
-    border: 2px solid #c4c7ce;
-    border-right: none;
-    background: #fff;
-    color: #222;
-}
-.search-form-group input:hover {
-    border-color: #9195a3;
-}
-.search-form-group input:focus {
-    border-color: #4e6ef2;
-}
-
-.search-form-group button {
-    cursor: pointer;
-    width: 108px;
-    height: 44px;
-    line-height: 45px;
-    padding: 0;
-    background: #4e6ef2;
-    border-radius: 0 10px 10px 0;
-    font-size: 17px;
-    color: #fff;
-    box-shadow: none;
-    font-weight: 400;
-    border: none;
-    outline: 0;
-    float: right;
-    z-index: 1;
-}
-.search-form-group button:active {
-    background-color: #4662d9;
-}
-.search-form-group button:hover {
-    background-color: #4662d9;
-}
-
-.search-header {
-    position: absolute;
-    bottom: 60px;
-    width: 100%;
-}
-
-.search-header h2 {
-    font-size: 24px;
-    font-weight: 900;
-}
-
-.search-header img {
-    display: inline-block;
-    width: 270px;
-    margin: 0 -12px -16px;
-}
-
-/* 功能区 */
-#function {
-    position: absolute;
-    width: 100%;
-    min-height: 220px;
-    text-align: center;
-    margin-top: 80px;
-}
-
-#tips {
-    color: #9195a3;
-    font-size: 16px;
-}
-
-#stop {
-    display: none;
-    border: none;
-    padding: 8px 15px;
-    border-radius: 100px;
-    color: #bababa;
-    background: #f1f1f1;
-    outline: none;
-    cursor: pointer;
-    margin-top: 50px;
-}
-
-#output {
-    display: none;
-    width: 100%;
-    max-width: 400px;
-    margin: 20px auto;
-}
-
-#output textarea {
-    width: 100%;
-    padding: 5px 8px;
-    border-radius: 3px;
-    border: 1px solid #c8c8c8;
-    outline: none;
-    word-break: break-all;
-}
-#output textarea:focus {
-    border-color: #4285f4;
-    box-shadow: 0 0 2px #4285f4;
-}
-
-#output .tool-btns {
-    text-align: right;
-    margin-top: 8px;
-}
-
-#output button {
-    outline: none;
-    cursor: pointer;
-    color: #fff;
-    background: #3f89ec;
-    border: none;
-    margin-left: 8px;
-    padding: 6px 14px;
-    border-radius: 3px;
-}
-#output button:hover {
-    background: #4490f7;
-}
-#output button:focus {
-    background: #3a84e8;
-}
-
-
-/* 页脚 */
-#footer {
-    width: 100%;
-    position: fixed;
-    z-index: 100;
-    bottom: 0;
-    left: 0;
-    height: 40px;
-    line-height: 40px;
-    font-size: 12px;
-    overflow: hidden;
-    background-color: #fafafa;
-    padding: 0 20px;
-}
-
-#footer li {
-    list-style: none;
-    display: inline-block;
-    float: left;
-    padding: 0 10px;
-}
-
-.footer-left, .footer-left a {
-    color: #9195a3;
-    text-decoration: none;
-}
-
-.footer-right {
-    float: right;
-}
-.footer-right, .footer-right a {
-    color: #bbb;
-}
-
-
-/* 鼠标指示箭头 */
-#arrow {
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 50px;
-    height: 50px;
-    z-index: 999;
-    background: url(../img/arrow.png) no-repeat;
-}
-
-#arrow::after {
-    content: '';
-    position: absolute;
-    top: -13px;
-    left: -15px;
-    z-index: -1;
-    border-radius: 9em;
-    box-shadow: 0 0 0 7px rgba(0,0,0,.4);
-    width: 30px;
-    height: 30px;
-    opacity: 0;
-}
-
-#arrow.active::after {
-    -webkit-animation: bubble-scale 1s ease;
-            animation: bubble-scale 1s ease;
-}
-
-@-webkit-keyframes bubble-scale {
-    from {
-        transform: scale(0);
-        opacity: 1
-    }
-    to {
-        transform:scale(2);
-        opacity: 0
-    }
-}
-
-@keyframes bubble-scale {
-    from {
-        transform: scale(0);
-        opacity: 1
-    }
-    to {
-        transform: scale(2);
-        opacity: 0
-    }
-}
-
-
-
-/* 响应式优化 */
-@media screen and (max-width: 650px) {  
-    #search {
-        margin: 0 10px;
-        height: auto;
-        min-height: 200px;
-    }
-    
-    .search-header img {
-        width: 180px;
-        margin: 0 -16px -12px;
-    }
-    
-    #search-form {
-        bottom: 10px;
-        border: 1px solid #363636;
-    }
-    
-    .search-form-input {
-        right: 81px;
-    }
-    
-    .search-form-input input {
-        border: none;
-        border-radius: 0;
-        padding: 12px;
-    }
-    
-    .search-form-group button {
-        width: 81px;
-        height: 44px;
-        padding: 0 10px;
-        border: none;
-        border-left: 1px solid #e8e8e8;
-        border-radius: 0;
-        font-size: 16px;
-        font-weight: 700;
-        line-height: 46px;
-        white-space: nowrap;
-        letter-spacing: -1px;
-        color: #38f;
-        background: #fff;
-    }
-    
-    .search-form-group button:active {
-        background-color: #fdfafa;
-    }
-    .search-form-group button:hover {
-        background-color: #fdfafa;
-    }
-    
-    #function {
-        position: relative;
-        top: 0;
-        margin-top: 50px;
-        padding: 0 10px;
-    }
-    
-    #stop {
-        margin-top: 30px;
-    }
-    
-    #footer {
-        padding: 0;
-    }
-    
-    #arrow {
-        background: url(../img/hand.png) no-repeat;
-    }
-}