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