bootstrap自适应大气倒计时即将开始页面代码-html代码-BFW代码库

代码语言：html
代码描述：bootstrap自适应大气倒计时即将开始页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Welcome | Crad</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.5.2.css">
    <style>
        * {
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
html,body {
	height:100%;
	width:100%;
	overflow:hidden
}
body {
	color:#444;
	font-family:'Barlow Condensed',sans-serif;
	font-size:16px;
	line-height:1.5;
	padding:20px;
	position:relative;
	z-index:1
}
h3,p {
	margin:0
}
h3 {
	font-size:28px;
	text-transform:uppercase
}
ul {
	margin:0;
	padding:0;
	list-style:none
}
a,a:hover,a:focus,a:active,button {
	text-decoration:none;
	outline:0
}
a:hover,a:focus,a:active {
	color:#fc730a
}
li a {
	color:#fff
}
a:hover,button:hover {
	-webkit-transition:all .3s ease-in;
	-o-transition:all .3s ease-in;
	-moz-transition:all .3s ease-in;
	transition:all .3s ease-in
}
.bg-img {
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center
}
.fixed {
	position:fixed;
	left:0;
	right:0
}
.fixed-middle {
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	z-index:-1
}
.contact-body-bg {
	background-image:url('//repo.bfw.wiki/bfwrepo/image/62254197e677b.png')
}
.color-white * {
	color:#fff
}
.btn {
	text-transform:uppercase;
	font-size:16px;
	font-weight:700;
	border:0;
	padding:15.5px 50px;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0
}
.btn-orange {
	background-color:#fe4602;
	background-image:linear-gradient(141deg,#fc840d 0,#fd6107 51%,#fe4602 75%);
	-webkit-box-shadow:0 3px 7px 0 rgba(39,201,220,0.2);
	-moz-box-shadow:0 3px 7px 0 rgba(39,201,220,0.2);
	box-shadow:0 3px 7px 0 rgba(39,201,220,0.2);
	color:#fff
}
.btn-orange:hover {
	color:#fff;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none
}
.btn-round {
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px
}
.btn {
	position:relative;
	z-index:1;
	overflow:hidden
}
.btn:before,.btn:after {
	content:'';
	position:absolute;
	width:0;
	height:100%;
	top:0;
	z-index:-1;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out
}
.btn:before {
	left:0
}
.btn:after {
	right:0
}
.btn:hover:before,.btn:hover:after {
	width:50%
}
.btn-orange:before,.btn-orange:after {
	background-color:#fe4602
}
.bg-header-dark {
	background-color:#01000235
}
#header {
	position:absolute;
	width:100%;
	top:15px;
	left:0
}
.navbar-brand h3 {
	font-size:38px;
	font-weight:700;
	text-transform:capitalize;
	display:inline-block;
	line-height:0;
	vertical-align:middle;
	margin-left:10px
}
.nav-menu {
	font-size:16px;
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	position:relative;
	-webkit-transition:all .3s;
	-o-transition:all .3s;
	-moz-transition:all .3s;
	transition:all .3s
}
.head-contact_us {
	text-align:right
}
.head-contact-title {
	font-size:14px;
	color:#fc730a;
	font-weight:700;
	display:block
}
.head-contact-no {
	font-size:25px;
	color:#fff;
	font-weight:700;
	display:block
}
.nav-item {
	display:flex
}
.nav-menu::before {
	content:'';
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	height:0;
	width:12px;
	background-color:#fff;
	-webkit-transition:all .1s;
	-o-transition:all .1s;
	-moz-transition:all .1s;
	transition:all .1s
}
.nav-menu::after {
	content:'';
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	height:0;
	width:12px;
	background-color:#fff;
	-webkit-transition:all .1s;
	-o-transition:all .1s;
	-moz-transition:all .1s;
	transition:all .1s
}
.nav-menu.active {
	color:#fc730a
}
.active.nav-menu::before {
	height:2px
}
.active.nav-menu::after {
	height:2px
}
.nav-item:hover .nav-menu::before {
	height:2px
}
.nav-item:hover .nav-menu::after {
	height:2px
}
.form-inline .form-control-style2 {
	width:100%;
	padding-left:30px;
	padding-right:230px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border:0;
	background-color:#210f4b
}
.form-control-style2 {
	background-color:transparent;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	outline:0;
	height:54px;
	padding:15px 23px;
	border-width:2px;
	border-color:#3d286e;
	border-style:solid;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	width:100%;
	color:#fff;
	font-weight:500
}
.title {
	text-align:center
}
.home2-small-title {
	font-size:20px;
	font-weight:500;
	color:#fc730a;
	text-transform:capitalize;
	margin-bottom:25px;
	position:relative;
	display:inline-block;
	line-height:0
}
.home2-main-title {
	font-size:70px;
	font-weight:700;
	color:#fff;
	letter-spacing:15px;
	text-transform:uppercase;
	position:relative;
	display:block;
	margin-bottom:25px
}
.clock-item {
	height:150px;
	width:150px;
	float:left;
	margin-right:20px
}
.clear {
	clear:both
}
.countdown-container {
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%)
}
.clock-item .inner {
	height:0;
	padding-bottom:100%;
	position:relative;
	width:100%
}
.clock-canvas {
	background-color:rgba(255,255,255,.1);
	border-radius:50%;
	height:0;
	padding-bottom:100%
}
.text {
	color:#fff;
	font-size:30px;
	font-weight:bold;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	text-align:center;
	width:100%
}
.text .val {
	font-size:50px;
	font-weight:800
}
.text .type-time {
	font-size:16px;
	font-weight:700;
	color:#fc7d0c;
	letter-spacing:2px
}
.subscribe-form {
	padding:0 20px
}
.form-inline {
	position:relative
}
.form-inline .btn {
	position:absolute;
	right:0;
	top:0
}
.social-icons-verticle {
	width:76px;
	position:fixed;
	bottom:15px;
	left:15px
}
.social-icons-verticle li a {
	display:block;
	border-radius:50%;
	border-width:2px;
	border-color:#777473;
	border-style:solid;
	width:50px;
	height:50px;
	line-height:45px;
	text-align:center;
	transition:all .3s
}
.social-icons-verticle li a:hover {
	border-color:transparent;
	background-color:#fe4602;
	background-image:linear-gradient(141deg,#fc840d 0,#fd6107 51%,#fe4602 75%)
}
.preloader-wrap {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:99;
	height:100%;
	width:100%;
	background-color:#fe4602;
	background-image:linear-gradient(141deg,#fc840d 0,#fd6107 51%,#fe4602 75%);
	z-index:9999999
}
.preloader {
	position:absolute;
	top:50%;
	text-align:center;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	z-index:999;
	width:24px;
	height:24px
}
.preloader span {
	display:inline-block;
	background-color:#fff;
	position:absolute;
	width:36px;
	height:36px;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	-webkit-animation:ball-fussion-ball1 1s 0s ease infinite;
	-moz-animation:ball-fussion-ball1 1s 0s ease infinite;
	-o-animation:ball-fussion-ball1 1s 0s ease infinite;
	animation:ball-fussion-ball1 1s 0s ease infinite
}
.preloader span:nth-child(1) {
	top:0;
	left:50%;
	z-index:1
}
.preloader span:nth-child(2) {
	top:50%;
	left:100%;
	z-index:2;
	-webkit-animation-name:ball-fussion-ball2;
	-moz-animation-name:ball-fussion-ball2;
	-o-animation-name:ball-fussion-ball2;
	animation-name:ball-fussion-ball2
}
.preloader span:nth-child(3) {
	top:100%;
	left:50%;
	z-index:1;
	-webkit-animation-name:ball-fussion-ball3;
	-moz-animation-name:ball-fussion-ball3;
	-o-animation-name:ball-fussion-ball3;
	animation-name:ball-fussion-ball3
}
.preloader span:nth-child(4) {
	top:50%;
	left:0;
	z-index:2;
	-webkit-animation-name:ball-fussion-ball4;
	-moz-animation-name:ball-fussion-ball4;
	-o-animation-name:ball-fussion-ball4;
	animation-name:ball-fussion-ball4
}
@-webkit-keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-webkit-keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-webkit-keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-webkit-keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}
.canvas-area {
	position:absolute;
	top:0;
	left:0;
	hei.........完整代码请登录后点击上方下载按钮下载查看