css+js实现悬浮按钮走光动画效果代码-html代码-BFW代码库

css+js实现悬浮按钮走光动画效果代码

代码语言：html

代码描述：css+js实现悬浮按钮走光动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
	background-color: #282828;
	padding: 3rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.title {
	font-size: 28px;
	text-align: center;
	color: #fff;
	margin-bottom: 30px;
}

.toolbar {
	text-align: center;
}

.toolbar-2 {
	text-align: center;
	margin-top: 30px;
	padding: 30px;
	background-color: rgba(255,255,255,0.05);
}




.btn {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	padding: 1rem 2rem;
	background-color: rgba(255,255,255,0.2);;
	color: #fff;
	border: 0;
	
	transition: all 200ms ease;
}
.btn.btn-round {
	border-radius: 10px;
}
.btn:focus {
	outline: none;
}
.btn:active {
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.1);
}

.btn-blue {
	background-color: #005db9;
}
.btn-red {
	background-color: #ad0052;
}
.btn-green {
	background-color: #00947e;
}
.btn-black {
	background-color: #444;
}



.btn-border {
	display: inline-block;
	margin: 5px;
}
.btn-border	.btn {
	display: block;
	margin: 2px;
}
	
.btn-border.btn-round {
	border-radius: 10px;
}
.btn-border.btn-round .btn {
	border-radius: 10px;
}
</style>
</head>
<body>

<div class="toolbar">
	<button class="btn">Button 1</button>
	<button class="btn btn-blue">Button 2</button>
	<button class="btn btn-red">Button 3</button>
	<button class="btn btn-green">Button 4</button>
	
</div>

<div class="effect-group-container toolbar-2">
	<div class="btn-border btn-black btn5">
		<button class="btn btn-black">Button 5</button>
	</div>
	<div class="btn-border btn-blue btn6">
		<button class="btn btn-blue">Button 6</button>
	</div>
	<div class="btn-border btn-red btn7">
		<button class="btn btn-red">Button 7</button>
	</div>
	<div class="bt.........完整代码请登录后点击上方下载按钮下载查看