From d3d9587cfbf98c4de58b1faa79d28d3fe8861d18 Mon Sep 17 00:00:00 2001 From: mengkunsoft <1163540807@qq.com> Date: Sun, 21 Jun 2020 19:43:39 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E9=A1=B9=E7=9B=AE=EF=BC=8C?= =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E4=B8=8E=E6=96=B0=E7=89=88=E7=99=BE=E5=BA=A6?= =?UTF-8?q?=20UI=20=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 +- api.php | 30 --- css/style.css | 530 +++++++++++++++++++++++++------------------- img/baidu_logo.png | Bin 19113 -> 15444 bytes img/hand.png | Bin 0 -> 1187 bytes index.html | 95 ++++---- js/base64.min.js | 10 + js/clipboard.min.js | 8 +- js/jquery.min.js | 9 +- js/lmbtfy.js | 110 --------- js/script.js | 124 +++++++++++ 11 files changed, 511 insertions(+), 420 deletions(-) delete mode 100644 api.php create mode 100644 img/hand.png create mode 100644 js/base64.min.js delete mode 100644 js/lmbtfy.js create mode 100644 js/script.js diff --git a/README.md b/README.md index a23995f..2c06f91 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
@@ -23,12 +23,14 @@ 让我帮你百度一下 - 优化版 -创意及代码来自 lmbtfy.cn 以及 lmbtfy.retaker.me,孟坤网页实验室在原作的基础上作了一些小修改,以适应移动端浏览 +原始版本来自 bangbang(http://lmbtfy.cn/),mengkun(https://mkblog.cn) 在原作的基础上进行了重置,风格变更为新版百度 UI,并适配了移动端 + +交互效果参考了 不会百度么?(http://buhuibaidu.me/) ### 在线演示 ----- -[http://lab.mkblog.cn/lmbtfy/](http://lab.mkblog.cn/lmbtfy/) +[http://tool.mkblog.cn/lmbtfy/](http://tool.mkblog.cn/lmbtfy/) ### 相关项目 @@ -40,6 +42,11 @@ ### 更新日志 ----- +#### 2020/6/21 +- 重构项目,风格与新版百度 UI 适配。 **注意:本版本修改了参数的获取方式,与旧版不兼容!如果你曾经使用了旧版,那么不要替换为新版,否则以前生成的网址全部会失效** +- 移除短网址模块 +- 增加点击指示特效 + #### 2019/10/14 - 将网址缩短接口替换为搜狗接口,修复无法生成短网址的问题 diff --git a/api.php b/api.php deleted file mode 100644 index 3087de2..0000000 --- a/api.php +++ /dev/null @@ -1,30 +0,0 @@ - 200, - 'msg' => 'success', - 'result' => shortUrl($_GET['url']) - ); -} else { - $result = array( - 'code' => -1, - 'msg' => 'url is empty', - 'result' => null - ); -} -die(json_encode($result)); - -/** - * 短网址生成函数 - * @param $longUrl 原始网址 - * @return 缩短后的网址 - */ -function shortUrl($longUrl) { - $result = @file_get_contents('http://sa.sogou.com/gettiny?url='.urlencode($longUrl)); - return $result? $result: $longUrl; -} diff --git a/css/style.css b/css/style.css index 7b6f05d..6db4f7a 100644 --- a/css/style.css +++ b/css/style.css @@ -1,259 +1,339 @@ -@charset "utf-8"; - -div, span, p, a, img, footer, html, body, button, h1, h2, h3, h4, h5, input { - font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; +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; } -.anim-trans { - -webkit-transition: .3s ease all; - -moz-transition: .3s ease all; - -o-transition: .3s ease all; - transition: .3s ease all; +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%; + top: 40%; + 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; +} +#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; } -/* 关于按钮 */ -.about { +#arrow::after { + content: ''; position: absolute; - top: 1em; - right: 1em; - height: 1.5em; - line-height: 1.5em; - width: 1.5em; - border-radius: .75em; - font-size: 16px; - text-align: center; - color: #fff; - background-color: #000; - background-color: rgba(0,0,0,.05); - cursor: pointer; -} -.about:hover { - background-color: #000; - background-color: rgba(0, 0, 0, 0.26); -} - -/*弹窗层*/ -.mk-pop-box { - z-index: 9999; - margin-bottom: 2px; - display: none; - position: fixed; - font-size: 14px; - width: 100%; - max-width: 350px; -} -.mk-pop-box-inner { - background: #fff; - border-radius: 3px; - border-top: 2px solid #fa7f40; - padding: 18px; -} -/* 弹窗标题 */ -.mk-pop-box-title { - font-size: 18px; - text-align: center; - font-weight: normal; - color: #333; - margin-bottom: 10px; -} -/* 弹窗主体内容 */ -.mk-pop-box-content { - margin-bottom: 13px; -} -.mk-pop-box-content p, .mk-pop-box-content p a { - font-size: 14px; - color: #808080; - text-decoration: none; - line-height: 20px; - line-height: 1.6em; - margin-bottom: 10px; -} -.mk-pop-box-content p a:hover { - color: #fa7f40; -} -/* 弹窗中的按钮 */ -.mk-pop-box-btn { - cursor: pointer; - margin: 0 auto; - min-width: 50px; - outline: none; - text-align: center; - border-radius: 2px; - display: block; - height: 34px; - line-height: 35px; - padding: 0 40px; - font-size: 14px; - background: #ff8140; - border: 1px solid #f77c3d; - color: #fff; - box-shadow: 0px 1px 2px rgba(0,0,0,0.25); -} -.mk-pop-box-btn:hover { - background: #f7671d; - border: 1px solid #f06923; -} -/* 弹窗遮罩层 */ -.mk-pop-box:before { - content: ""; - color: #C7EDCC; - background-color: #000; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0.59; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 59); - filter: alpha(opacity = 59); + top: -13px; + left: -15px; z-index: -1; -} - -/* 页面主体部分 */ -.container { - height: 500px; - width: 100%; - text-align: center; - padding: 10px; -} - -/* 大标题 */ -.title { - padding-top: 100px; - padding-bottom: 26px; -} -.baidu-logo { - height: 100px; - margin-bottom: -20px; -} - -/* 搜索表单 */ -.mk-search-form { - max-width: 650px; - margin: 0 auto; - font-size: 16px; -} -.mk-search-form input { - float: left; - padding: 0 6px; - width: 77%; - height: 37px; - border: 1px solid #d8d8d8; - border-right-color: transparent; - line-height: 37px; - font-size: 1em; -} -.mk-search-form input:focus { - border: 1px solid #3385ff; - border-right-color: transparent; - outline: none; -} -.mk-search-form button { - cursor: pointer; - border: none; - background-color: #3385ff; - color: white; - position: relative; - overflow: visible; - width: 23%; - height: 37px; - text-transform: uppercase; - font-size: 1em; -} -.mk-search-form button:hover { - background-color: #317ef3; - box-shadow: 1px 1px 1px #ccc; -} - -/* 提示语 */ -#instructions { - display: inline-block; - margin-top: 40px; - padding: 30px 2px; - color: #999999; - font-size: 20px; -} - -/* 生成输出框 */ -#output-box { - display: none; -} -.btn { - display: inline-block; - width: 100px; - height: 35px; - line-height: 38px; - margin: 0 10px; - background-color: #3385ff; - color: white; - text-align: center; - font-size: 0.8em; - border: none; - cursor: pointer; -} -.btn:hover { - opacity: 0.8; -} - -/*链接框*/ -#output-link { - width: 300px; + border-radius: 9em; + box-shadow: 0 0 0 7px rgba(0,0,0,.4); + width: 30px; height: 30px; - font-size: 25px; - margin-bottom: 20px; - vertical-align: middle; + opacity: 0; } -/* 页脚 */ -.copyright, .copyright a { - color: #999; - text-align: center; - text-decoration: none; - font-size: 14px; +#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: 666px) { - .title { +@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: 400; - padding-top: 100px; + font-weight: 700; + line-height: 46px; + white-space: nowrap; + letter-spacing: -1px; + color: #38f; + background: #fff; } - .baidu-logo { - height: 50px; - margin: 0 5px -8px; + .search-form-group button:active { + background-color: #fdfafa; } - - .mk-search-form { - font-size: 14px; + .search-form-group button:hover { + background-color: #fdfafa; } - #instructions { - font-size: 14px; + #function { + position: relative; + top: 0; + margin-top: 50px; + padding: 0 10px; } - - #output-box { + + #stop { margin-top: 30px; } - /* 链接框 */ - #output-link { - width: 100%; - height: 30px; - font-size: 20px; - margin-bottom: 20px; - vertical-align: middle; + + #footer { + padding: 0; + } + + #arrow { + background: url(../img/hand.png) no-repeat; } } \ No newline at end of file diff --git a/img/baidu_logo.png b/img/baidu_logo.png index 97e1b6c1cd0b4af1ccfe5b773d04674eb3c7bdb1..510f111989ba7eb2f9ee158a3d60e3e6d9992347 100644 GIT binary patch literal 15444 zcmeHuWl$VZvo;VC+%>oacV}^z;O_43?hshqb+O>E1a}J|xVyVM1h)WpbL+eH{l9
一下
+ 一下
+