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

代码语言:html

所属分类:悬停

代码描述:css+js实现鼠标悬浮跟随发光走光按钮效果代码

代码标签: css 悬浮 跟随 发光 按钮

下面为部分代码预览,完整代码请点击下载或在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);
    }
    
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0