css+js实现鼠标悬浮跟随发光走光按钮效果代码-html代码-BFW代码库

代码语言：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="btn-border btn-green btn8">
            <button class="btn btn-green">Button 8</button>
        </div>
        <br>
        <div class="btn-border btn-round btn-red btn6">
            <button class="btn btn-red">Button 9</button>
        </div>
        <div class="btn-border btn-round btn-blue btn9">
            <button class="btn btn-blue">Button 10</button>
        </div>
        <div class="btn-border btn-round btn-black btn10">
            <button class="btn btn-black">Button 11</button>
        </div>
    </div>

    <script>
        /******/ (function(modules) { // webpackBootstrap
    /******/ 	// The module cache
    /******/ 	var installedModules = {};
    /******/
    /******/ 	// The require function
    /******/ 	function __webpack_require__(moduleId) {
    /******/
    /******/ 		// Check if module is in cache
    /******/ 		if(installedModules[moduleId]) {
    /******/ 			return installedModules[moduleId].exports;
    /******/ 		}
    /******/ 		// Create a new module (and put it into the cache)
    /******/ 		var module = installedModules[moduleId] = {
    /******/ 			i: moduleId,
    /******/ 			l: false,
    /******/ 			exports: {}
    /******/ 		};
    /******/
    /******/ 		// Execute the module function
    /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/ 		// Flag the module as loaded
    /******/ 		module.l = true;
    /******/
    /******/ 		// Return the exports of the module
    /******/ 		return module.exports;
    /******/ 	}
    /******/
    /******/
    /******/ 	// expose the modules object (__webpack_modules__)
    /******/ 	__webpack_require__.m = modules;
    /******/
    /******/ 	// expose the module cache
    /******/ 	__webpack_require__.c = installedModules;
    /******/
    /******/ 	// define getter function for harmony exports
    /******/ 	__webpack_require__.d = function(exports, name, getter) {
    /******/ 		if(!__webpack_require__.o(exports, name)) {
    /******/ 			Object.defineProperty(exports, name, {
    /******/ 				configurable: false,
    /******/ 				enumerable: true,
    /******/ 				get: getter
    /******/ 			});
    /******/ 		}
    /******/ 	};
    /******/
    /******/ 	// getDefaultExport function for compatibility with non-harmony modules
    /******/ 	__webpack_require__.n = function(module) {
    /******/ 		var getter = module && module.__esModule ?
    /******/ 			function getDefault() { return module['default']; } :
    /******/ 			function getModuleExports() { return module; };
    /******/ 		__webpack_require__.d(getter, 'a', getter);
    /******/ 		return getter;
    /******/ 	};
    /******/
    /******/ 	// Object.prototype.hasOwnProperty.call
    /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    /******/
    /******/ 	// __webpack_public_path__
    /******/ 	__webpack_require__.p = "";
    /******/
    /******/ 	// Load entry module and return exports
    /******/ 	return __webpack_require__(__webpack_require__.s = 0);
    /******/ })
    /************************************************************************/
    /******/ ([
    /* 0 */
    /***/ (function(module, exports, __webpack_require__) {
    
    module.exports = __webpack_require__(1);
    
    
    /***/ }),
    /* 1 */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
    
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_js_main__ = __webpack_require__(2);
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_js_main___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__lib_js_main__);
    
    
    // console.log(FluentRevealEffect)
    
    __WEBPACK_IMPORTED_MODULE_0__lib_js_main___default.a.applyEffect(".toolbar", {
    	lightColor: "rgba(255,255,255,0.1)",
    	gradientSize: 500
    });
    
    __WEBPACK_IMPORTED_MODULE_0__lib_js_main___default.a.applyEffect(".toolbar > .btn", {
    	clickEffect: true
    });
    
    __WEBPACK_IMPORTED_MODULE_0__lib_js_main___default.a.applyEffect(".effect-group-container", {
    	clickEffect: true,
    	lightColor: ".........完整代码请登录后点击上方下载按钮下载查看