webusb api例子浏览器js操作usb设备
代码语言:html
所属分类:其他
代码描述:webusb api例子浏览器js操作usb设备,webusb还处理实验阶段,可以抢先体验下
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --dust: #F1F1F2; --silver: #C2C2C2; --cobalt: #445780; --kelly-1: #67C28D; --kelly-2: #41A46B; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--dust); box-sizing: border-box; font-family: 'Inter', 'helvetica neue', arial, sans-serif; height: 100%; margin: 0; padding: 0; position: relative; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; width: 100%; } main { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column wrap; -webkit-box-pack: stretch; justify-content: stretch; -webkit-box-align: center; align-items: center; min-height: 100vh; width: 100%; } #instructions { padding: 2em; width: 100%; } #instructions h1 { margin: 0 0 .75em; font-size: 1.25em; } #instructions p { margin: 0 0 1em; font-size: .75em; } #instructions button { background-color: white; border: solid 1px var(--cobalt); border-radius: .25em; color: var(--cobalt); display: inline-block; font-size: 1em; margin: .5em .5em .65em; padding: .15em .35em; text-transform: uppercase; } section { box-sizing: border-box; width: 100%; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; -webkit-box-pack: stretch; justify-content: stretch; -webkit-box-align: stretch; align-items: stretch; -webkit-box-flex: 1; flex: 1 1 auto; } .usb-status { width: 100%; -webkit-box-flex: 1; flex: 1 1 auto; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .usb-status--text { margin: 1em auto 0em; display: block; font-size: 1em; font-weight: 600; color: var(--cobalt); -webkit-box-ordinal-group: 3; order: 2; text-align: center; text-transform: uppercase; } .usb-status--icon { width: 10em; pointer-events: none; position: relative; } .usb-status--icon::before, .usb-status--icon::after { content: ""; display: block; position: absolute; z-index: 1; } .usb-status--icon::before { background: var(--dust); border-bottom: solid 3px var(--cobalt); height: 3em; top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); width: 100%; } .usb-status--icon::after { background: var(--silver); border-radius: 50%; height: 1em; right: 10%; top: -1.5em; width: 1em; } .usb-status--cover { -webkit-transform-origin: 48px 62px; transform-origin: 48px 62px; } /* if animation is not preferred */ @media (prefers-reduced-motion: reduce) { /* disconnected styling */ .usb-status--disconnected .usb-status--usb { -webkit-transform: translateY(0); transform: translateY(0); } .usb-status--disconnected .usb-status--cover { -webkit-transform: rotate(0turn); transform: rotate(0turn); } /* connected styling */ .usb-status--connected .usb-status--text { /*color: var(--kelly-2);*/ } .usb-status--connected .usb-status--icon::after { background: var(--kelly-1); } .usb-status--connected .usb-status--usb { -webkit-transform: translateY(-27px); transform: translateY(-27px); } .usb-status--connected .usb-status--cover { -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); } } /* if animation is allowed */ @media (prefers-reduced-motion: no-preference) { /* disconnected styling */ .usb-status--disconnected .usb-status--text.text-in-out { -webkit-animation: text-in-out 0.8s ease both, text-color-disconnect 0.4s ease both 0.4s; animation: text-in-out 0.8s ease both, text-color-disconnect 0.4s ease both 0.4s; } @-webkit-keyframes text-in-out { 0% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } } @keyframes text-in-out { 0% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes text-color-disconnect { 100% { color: var(--cobalt); } } @keyframes text-color-disconnect { 100% { color: var(--cobalt); } } .usb-status--disconnected .usb-status--icon::after { -webkit-transition: background .4s ease; transition: background .4s ease; -webkit-transition-delay: .2s; transition-delay: .2s; } .usb-status--disconnected .usb-status--usb { -webkit-animation: usb-disconnect .65s both; animation: usb-disconnect .65s both; } @-webkit-keyframes usb-disconnect { 0% { -webkit-transform: translateY(-27px); transform: translateY(-27px); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } 60% { -webkit-transform: translateY(5px); transform: translateY(5px); -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes usb-disconnect { 0% { -webkit-transform: translateY(-27px); transform: translateY(-27px); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } 60% { -webkit-transform: translateY(5px); transform: translateY(5px); -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .usb-status--disconnected .usb-status--cover { -webkit-animation: usb-cover-disconnect 0.6s cubic-bezier(0.47, 0.14, 0.21, 1) both 0.4s; animation: usb-cover-disconnect 0.6s cubic-bezier(0.47, 0.14, 0.21, 1) both 0.4s; } @-webkit-keyframes usb-cover-disconnect { 0% { -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); } 100% { -webkit-transform: rotate(0turn); transform: rotate(0turn); } } @keyframes usb-cover-disconnect { 0% { -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); } 100% { -webkit-transform: rotate(0turn); transform: rotate(0turn); } } /* connected styling */ .usb-status--connected .usb-status--text.text-in-out { -webkit-animation: text-in-out 0.8s ease both, text-color-connect 0.4s ease both 0.4s; animation: text-in-out 0.8s ease both, text-color-connect 0.4s ease both 0.4s; } @keyframes text-in-out { 0% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes text-color-connect { 100% { color: var(--kelly-2); } } @keyframes text-color-connect { 100% { color: var(--kelly-2); } } .usb-status--connected .usb-status--icon::after { background: var(--kelly-1); -webkit-transition: background .4s ease; transi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0