jquery+bootstrap实现支持暗黑模式的滚动返回顶部按钮效果代码
代码语言:html
所属分类:其他
代码描述: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