jquery+bootstrap实现支持暗黑模式的滚动返回顶部按钮效果代码

代码语言:html

所属分类:其他

代码描述:jquery+bootstrap实现支持暗黑模式的滚动返回顶部按钮效果代码

代码标签: jquery bootstrap 返回 顶部

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
        @import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext');
        
        
        
        :root {
        	font-size: 20px;
        	--red: #da2c4d;
        	--yellow: #f8ab37;
        	--green: #2ecc71;
        	--white: #ffffff;
        	--grey-light: #f2f7f9;
        	--grey: #ecedf3;
        	--black: #080808;
        	--black-blue: #1f2029;
        	--black-blue-light: #353746;
        	--black-blue-light-2: #404255;
        	--black-blue-light-3: #4b4d64;
        	--black-light: #424455;
        }
        body{
            font-family: 'Raleway', sans-serif;
        	font-size: 16px;
        	font-weight: 500;
        	line-height: 1.65;
        	color: var(--grey);
        	background-color: var(--black-blue);
        	overflow-x: hidden;
        	letter-spacing: 0.2px;
        	-webkit-transition: all 200ms linear;
        	transition: all 200ms linear; 
        	text-rendering: optimizeLegibility !important;
        	-webkit-font-smoothing: antialiased !important;
        }
        body.light{
        	color: var(--black-light);
        }
        h1{
            font-family: 'Muli', sans-serif;
        	font-size: 12vw;
        	font-weight: 900;
        	line-height: 1;
        	color: var(--white);
        	-webkit-transition: all 200ms linear;
        	transition: all 200ms linear; 
        }
        body.light h1{
        	color: var(--black);
        }
        body.light{
        	background-color: var(--white);
        }
        .navbar-brand{
        	height: 36px;
        	position: fixed;
        	top: 50px;
        	left: 70px;
        	z-index: 3333;
        	width: auto;
        	display: inline-block;
        	margin: 0;
        	padding: 0;
        	-webkit-transition : all 0.3s ease-out;
        	transition : all 0.3s ease-out;
        }
        .navbar-brand::before{
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0