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 cl.........完整代码请登录后点击上方下载按钮下载查看