augmented-ui+codemirror实现炫酷可换色代码编辑器效果代码
代码语言:html
所属分类:其他
代码描述:augmented-ui+codemirror实现炫酷可换色代码编辑器效果代码
代码标签: augmented codemirror 炫酷 换色 代码 编辑器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/augmented.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/codemirror.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/simplescrollbars.min.css"> <style> .code-container { resize: both; overflow: hidden; margin: auto; width: 80vw; height: 80vh; min-width: 420px; min-height: 255px; position: relative; --glow-margin: 70px; filter: drop-shadow(0 0 75px rgb(128 0 255 / 0.25)); } .code-container::before { content: attr(content); position: absolute; bottom: 90px; right: 90px; z-index: 999; color: rgb(255 200 255 / 0.5); text-shadow: 0 0 12px rebeccapurple; letter-spacing: 0.1em; } .code-container::after { content: ""; background: linear-gradient( to right, transparent, black 25px, black 110px, transparent 110px 175px, black 175px, black calc(100% - 25px), transparent ); position: absolute; top: 125px; left: var(--glow-margin); right: var(--glow-margin); height: 4px; display: block; z-index: 90; opacity: 0.5; } .glow-container { position: absolute; inset: 0; display: grid; z-index: 2; pointer-events: none; --glow: drop-shadow(0 0 1px violet); filter: var(--glow) brightness(1.5) drop-shadow(0 0 10px violet); } .augs { --aug-rect-l1: initial; --aug-l1-width: 110px; --aug-l1-height: 4px; --aug-l-center: 57px; --aug-rect-r1: initial; --aug-r1-width: (100% - 125px - 50px); --aug-r1-height: 4px; --aug-r-center: 57px; --aug-clip-tr1: initial; --aug-tr1-alt-join-out: initial; --aug-tr1: 17px; --aug-clip-tr2: initial; --aug-tr2: 17px; --aug-tr-extend1: 50px; --aug-round-tl1: initial; --aug-tl1: 8px; --aug-round-br1: initial; --aug-br1: 8px; margin: auto; width: calc(100% - var(--glow-margin) * 2); height: calc(100% - var(--glow-margin) * 2); } .glow-container .augs { --aug-border: initial; --aug-border-all: 2px; --aug-border-bg: linear-gradient(to bottom left, rebeccapurple, orange); } section.augs { position: absolute; inset: 0; margin: auto; --aug-inlay: initial; --aug-inlay-all: 2px; --aug-inlay-bg: url(http://augmented-ui.com/img/propjockey.png) center 70% / auto 70% no-repeat; --aug-inlay-opacity: 0.25; } section.augs::before { filter: brightness(0.2) blur(10px); } .dots { position: absolute; top: 2px; left: 2px; width: 110px; height: 50px; --red: #fc199a; --yellow: #ffcc00; --green: #61e2ff; --close: radial-gradient(circle, var(--red), var(--red) 7px, transparent 8px); --min: radial-gradient(circle, var(--yellow), var(--yellow) 7px, transparent 8px); --max: radial-gradient(circle, var(--green), var(--green) 7px, transparent 8px); background: var(--close) -28px no-repeat, var(--min) -2px no-repeat, var(--max) 24px no-repeat; filter: brightness(0.5); opacity: 0.75; cursor: pointer; border: none; } input { position: absolute; top: 17px; left: 120px; width: calc(100% - 240px); background: transparent; color: rgb(255 200 255 / 0.5); text-shadow: 0 0 12px rebeccapurple; border: none; text-align: center; letter-spacing: 0.1em; } .code { position: absolute; inset: 80px 10px 10px 10px; font-size: 20px; color: white; filter: brightness(1.2); } .code * { font-size: 18px; font-weight: normal; color: #b5b4b6; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; } body { display: grid; min-height: 100vh; width: 100vw; --c: rgb(0 0 0 / 0.95); --bgb: linear-gradient(var(--c), var(--c)); --bg: repeating-conic-gradient( from 7.5deg at center center, hsl(200, 100%, 0%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg ); background: var(--bgb), var(--bg), black; } * { font: normal 1em sans-serif; box-sizing: border-box; padding: 0; margin: 0; } /* https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine */ .bg { background: repeating-linear-gradient( to top, rgba(255, 255, 255, 0.03) 0px 2px, transparent 2px 4px ), linear-gradient(to bottom, #200933 75%, #3d0b43); } .bg::after{ content:''; height:50%; width:100%; display:block; background-image:linear-gradient(90deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px); background-position:bottom; background-repeat:repeat; background-size:20px 20px; left: -25px; position: absolute; pointer-events: none; bottom: 0; transform: perspective(100px) rotateX(60deg); z-index: 0; } .CodeMirror-gutters { background: transparent; border: none; margin-right: 15px; } .CodeMirror { height: 100%; background: transparent; } .CodeMirror-linenumber { padding-right: 1em; } .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div { background: rgba(153, 99, 255, 0.5); } .CodeMirror-scrollbar-filler { display: none!important; } /* codepen's highcontrast-dark theme */ .cm-header{font-weight:700}.cm-strong{font-weight:700}.cm-em{font-style:italic}:root{--editor-top-bar-background: black;--tab-bg: #131417;--tab-border-color: #2a2c33;--resizer-background: var(--editor-top-bar-background);--resizer-border: #242424}.sidebar-false .main-header,.sidebar-false .main-header .header-wrap,.editor-footer{background:var(--editor-top-bar-background)}.CodeMirror-cursor{border-left-color:#fff!important}.CodeMirror-selected{background:rgba(255,255,255,.05)}.CodeMirror-focused .CodeMirror-selected{background:rgba(255,255,255,.1)}.CodeMirror-matchingbracket{border-bottom:1px solid rgba(255,255,255,.5)}.CodeMirror-matchingtag{border-bottom:1px solid rgba(255,255,255,.3)}.cm-searching{background:#000;outline:2px solid rgba(255,255,255,.25)}.CodeMirror-hints,.emmet-abbreviation-preview{border:1px solid #5a5f73;background:#1e1f26}.CodeMirror-hint{color:#fff}li.CodeMirror-hint-active{background:#c7c9d3;color:#000}.project-editor-warning{background:rgba(255,255,255,.1)}.editor-footer{border-top-color:var(--resizer-border,var(--cp-color-6))}.cm-keyword{color:#ffdd40}.cm-atom{color:#a3d65a}.box-html .cm-atom{color:#ff3c41}.cm-def{color:#0ebeff}.cm-variable{color:#c7c9d3}.cm-variable-2{color:#47cf73}.cm-variable-3{color:#fff}.cm-header{color:#ff3c41}.cm-number{color:#2bc7b9}.cm-property{color:#5e91f2}.cm-attribute{color:#e3e4e8}.cm-builtin{color:#ae63e4}.cm-qualifier{color:#ffdd40}.cm-operator{color:#47cf73}.cm-meta{color:#0ebeff}.cm-string{color:#2bc7b9}.cm-string-2{color:#d75093}.cm-tag{color:#ffdd40}.box-css .cm-tag{color:#ff8d41}.cm-tag.cm-bracket{color:#9b9dad}.cm-comment{color:#88afbf}body.editor{background:#131417}.box.box.box,.editor .top-boxes,.CodeMirror-gutter-wrapper,body.project .editor-pane,body.project .editor{background:#131417}.box.box.box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre,body.project .editor-pane pre,body.project .editor pre{color:#d5d7de}.CodeMirror-guttermarker-subtle,.CodeMirror-linenumber{color:rgba(113,119,144,.6)}#output pre::-webkit-scrollbar,#output iframe::-webkit-scrollbar{width:.5em;height:.5em}#output pre::-webkit-scrollbar-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0