jquery+css实现页面滚动到底部弹出特效代码-html代码-BFW代码库

jquery+css实现页面滚动到底部弹出特效代码

代码语言：html

代码描述：jquery+css实现页面滚动到底部弹出特效代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
:root {
	--clr1:#ddd;
	--clr2:#efefef;
	--clr3:#333;
	--clr4:tomato;
	--border-radius:7px;
	--text-radius:50em
}
body {
	background:var(--clr1);
	padding:50px 0 0 0;
	margin:0 10px
}
body *,body:after,body:before {
	box-sizing:border-box
}
.transparent {
	background:transparent!important
}
.wrap {
	max-width:960px;
	min-width:360px;
	margin:0 auto;
	position:relative
}
.wrap.sticky {
	margin-top:150px
}
.fluid .wrap {
	max-width:100%!important
}
header {
	background:var(--clr2);
	padding:50px;
	width:100%;
	border-radius:var(--border-radius);
	position:relative;
	z-index:99
}
.wrap.sticky header {
	background:var(--clr2);
	padding:50px;
	position:fixed;
	top:0;
	max-width:960px;
	width:calc(100% - 20px);
	min-width:360px;
	border-radius:0 0 var(--border-radius) var(--border-radius)
}
.fluid .wrap.sticky header {
	max-width:100%!important
}
header .logo {
	background:var(--clr1);
	width:50px;
	height:50px;
	border-radius:var(--text-radius)
}
header nav {
	position:absolute;
	right:0;
	top:50%;
	transform:translate(-50px,-50%)
}
header nav ul li {
	display:inline-block;
	list-style:none;
	width:60px;
	height:10px;
	background:var(--clr1);
	border-radius:var(--text-radius)
}
section {
	background:var(--clr2);
	padding:100px 50px;
	width:100%;
	border-radius:var(--border-radius);
	position:relative;
	margin:10px 0 0 0
}
section .headline {
	display:block;
	margin:0 auto;
	list-style:none;
	max-width:260px;
	height:30px;
	background:var(--clr1);
	border-radius:var(--text-radius)
}
section .text {
	display:block;
	margin:10px auto;
	max-width:500px;
	height:14px;
	background:var(--clr1);
	border-radius:var(--text-radius)
}
se.........完整代码请登录后点击上方下载按钮下载查看