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

代码语言：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)
}
section .button {
	display:block;
	margin:20px auto 0 auto;
	max-width:120px;
	height:35px;
	background:var(--clr1);
	border-radius:var(--text-radius)
}
section.contentbox .headline {
	margin:10px 0!important;
	max-width:65%
}
section.contentbox .text {
	margin:10px 0!important;
	max-width:100%
}
section.contentbox .button {
	margin:10px 0!important
}
section.cards {
	padding:0;
	background:transparent;
	display:table
}
section.cards .card {
	background:var(--clr2);
	width:calc(33.6% - 10px);
	margin:0 5px;
	border-radius:var(--border-radius);
	display:inline-block
}
section.cards .card:first-child {
	margin:0 5px 0 0
}
section.cards .card:last-child {
	margin:0 0 0 5px
}
section.cards .card .content {
	padding:40px
}
section.cards .card img {
	width:100%;
	height:auto;
	border-radius:var(--border-radius) var(--border-radius) 0 0
}
footer {
	padding:50px;
	width:100%;
	border-radius:var(--border-radius) var(--border-radius) 0 0;
	position:relative;
	margin:10px 0 0 0
}
footer .logo {
	background:var(--clr2);
	width:50px;
	height:50px;
	border-radius:var(--text-radius)
}
footer nav {
	position:absolute;
	right:0;
	top:50%;
	transform:translate(-50px,-50%)
}
footer nav ul li {
	display:inline-block;
	list-style:none;
	width:60px;
	height:10px;
	background:var(--clr2);
	border-radius:var(--text-radius)
}
@media(max-width:728px) {
	section.cards .card {
	width:100%;
	display:block;
	margin:10px 0 0 0!important;
	padding:0
}
.wrapper {
	padding:50px 10px 100px 10px!important
}
}body,html {
	max-width:100%;
	overflow-x:hidden
}
body {
	background:var(--clr4);
	text-rendering:optimizelegibility;
	margin:0;
	padding:0;
	height:100%
}
.wrapper {
	transform-origin:center bottom 0;
	transition:all .5s ease 0s;
	box-shadow:0 22px 54px rgba(0,0,0,0.5);
	background:var(--clr3);
	padding:50px 50px 100px 50px
}
body.tight .wrapper {
	transform:translateY(-60px) scale(0.9);
	cursor:pointer
}
.footer {
	width:90%;
	max-width:1440px;
	margin:0 auto;
	text-align:center;
	margin-bottom:50px
}
@keyframes bounce {
	0%,20%,50%,80%,100% {
	-moz-transform:translateY(0);
	-ms-transform:translateY(0);
	-webkit-transform:translateY(0);
	transform:translateY(0)
}
40% {
	-moz-transform:translateY(-30px);
	-ms-transform:translateY(-30px);
	-webkit-transform:translateY(-30px);
	transform:translateY(-30px)
}
60% {
	-moz-transform:translateY(-15px);
	-ms-transform:translateY(-15px);
	-webkit-transform:translateY(-15px);
	transform:translateY(-15px)
}
}.arrow {
	position:fixed;
	bottom:50px;
	left:50%;
	cursor:pointer;
	margin-left:-20px;
	width:20px;
	height:20px;
	padding:20px;
	z-index:99;
	background-color:var(--clr4);
	border-radius:50em;
	background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTku.........完整代码请登录后点击上方下载按钮下载查看