diff --git a/css/style.css b/css/style.css index 83c8b6c..b401dff 100644 --- a/css/style.css +++ b/css/style.css @@ -1,342 +1 @@ -@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; -} - -.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; - } -} \ No newline at end of file +@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}}