diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index c56ba93..0a06833 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -202,17 +202,50 @@ td { .Qr-input-upload { display: flex; - margin-top: calc((10px + 2vmin) * 2); - margin-bottom: calc((10px + 2vmin) * 2); max-width: calc(100vw - 46px); width: 20em; } +.Qr-input-upload-div { + margin-top: calc((5px + 2vmin) * 2); + margin-bottom: calc((10px + 2vmin + 10px) * 2); + position: relative; +} + +.Qr-input-upload:hover + .Qr-input-hint { + opacity: 0.6; + -webkit-transition-duration: 0.2s; /* Safari */ + -moz-animation-duration: 0.2s; + transition-duration: 0.2s; +} + +.Qr-input-hint { + opacity: 0; + margin-top: 12px; + font-size: 12px; + position: absolute; + left: 0; + z-index: 1; + -webkit-transition-timing-function: ease-in-out; + -moz-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-duration: 0.3s; /* Safari */ + -moz-animation-duration: 0.3s; + transition-duration: 0.3s; +} + +@media (min-width: 500px) { + .Qr-input-hint { + margin-top: 14px; + font-size: 14px; + } +} + .big-input { height: calc(2em + 6px); font-size: calc(10px + 2vmin); border: rgba(0,0,0,0.12) solid 2px; - margin-right: 10px; + margin-left: 10px; flex: 1; } @@ -514,6 +547,11 @@ input[type="number"]{ } a { + -webkit-appearance: none; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -moz-appearance: none; + -moz-text-size-adjust: 100%; color: currentColor; text-decoration: none; } diff --git a/src/components/app/PartMore.js b/src/components/app/PartMore.js index 09bb09b..1c10482 100644 --- a/src/components/app/PartMore.js +++ b/src/components/app/PartMore.js @@ -13,7 +13,7 @@ const PartMore = () => (
普通的二维码样式单一,不能与环境较好的融合。这一个生成器有着 丰富的参数化样式、基于 SVG 的二维码生成能力,在为我们提供精美样式的同时,不限制参数如数值、颜色、背景图片的选择,又因 SVG 有较好的拓展性,可以完美兼容矢量制图流程。
从输入 URL 开始。没有确认框,没有额外的页面,选择样式后自动更新,调整参数后下载即可。
+从输入 URL 开始(记得加 http:// 或 https://)。没有确认框,没有额外的页面,选择样式后自动更新,调整参数后下载即可。
这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式,各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG 有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工,如删除中央的信息点 放入自己的 Logo 等。如果需要直接分享二维码图像,请直接下载 JPG 格式。