augmented+css实现科技风格边框发光效果代码-html代码-BFW代码库

augmented+css实现科技风格边框发光效果代码

代码语言：html

代码描述：augmented+css实现科技风格边框发光效果代码

下面为部分代码预览，完整代码请点击下载或在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">
   <style>
 html {
        display:flex;
        min-height:100%;
        min-height:100vh;
}
body {
        background:#000;
        font-family:Helvetica,Arial,sans-serif;
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
}
.checkbox {
        appearance:none;
        -webkit-appearance:none;
        -moz-appearance:none;
        cursor:pointer;
        color:cyan;
        --message:"Tick to open";
        --bg:transparent;
        position:fixed;
        top:0;
        left:0;
        margin:1em;
}
.checkbox:checked {
        --bg:unset;
        --message:"Untick to close";
}
.checkbox:before,.checkbox:after {
        content:"";
        display:inline-block;
        vertical-align:middle;
}
.checkbox:before {
        padding:.5em;
        background:var(--bg,cyan);
        border:1px solid;
}
.checkbox:after {
        content:var(--message);
        color:#fff;
        marg.........完整代码请登录后点击上方下载按钮下载查看