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;
	margin-left:.5em;
}
.message_container {
	filter:drop-shadow(0 0 8px cyan);
}
.message_container .message {
	background:#000;
	--aug-border:2px;
	--aug-border-bg:cyan;
	width:calc(100% - 20px);
	max-width:640px;
	margin:0 auto;
	overflow:hidden;
	transition:all .5s;
}
.message_container .message .title {
	display:inline-block;
	padding:.5em 2em;
	font-weight:bold;
	letter-spacing:.1em;
	text-align:center;
	text-transform:uppercase;
	--aug-inset:.25em;
	--aug-inset-bg:#ff0;
	--aug-br:.75em;
}
.messa.........完整代码请登录后点击上方下载按钮下载查看