HTML5网站即将上线单页面特效代码



10 36 13



特效描述:网站即将上线 单页面,HTML5网站即将上线单页面特效代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bicolor.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/custom.css">

2. 引入JS

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/vendor.js"></script>
<script type="text/javascript" src="assets/js/options.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>

3. HTML代码

<div id="awd-site-wrap" class="bg bg-home">
<div id="bg">
<div id="overlay">
	<div class="awd-site-bg bg-home"></div>
	<div class="awd-site-bg bg-subscribe"></div>
	<div class="awd-site-bg bg-about"></div>
	<div class="awd-site-bg bg-contact"></div>
	<div class="awd-site-bg bg-services"></div>
</div>
<canvas id="awd-site-canvas"></canvas>
</div>
<!-- START SITE HEADER -->
<header id="awd-site-header">
<div id="awd-site-logo" class="animated" data-animation="fadeInDown" data-animation-delay="500">
	<h1><a href="#" class="go-slide" data-slide="home"><i class="fa fa-commenting-o"></i><span>Mr.Li</span></a></h1>
</div>
<button class="menu-toggle animated" data-animation="fadeInDown" data-animation-delay="500" data-role="toggle">
	<span></span>
	<span></span>
	<span></span>
</button>
<!-- START NAVIGATION -->
<nav id="awd-site-nav" class="navigation animated" data-animation="fadeInDown" data-animation-delay="500">
	<div class="nav-container">
		<!-- START NAVIGATION MENU ITEMS -->
		<ul>
			<li><a href="#" data-slide="home" class="active">首页</a></li>
			<li><a href="#" data-slide="subscribe">订阅</a></li>
			<li><a href="#" data-slide="about">关于</a></li>
			<li><a href="#" data-slide="services">服务</a></li>
			<li><a href="#" data-slide="contact">联系我们</a></li>
		</ul>
		<!-- END NAVIGATION MENU ITEMS -->
	</div>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END SITE HEADER -->
<!-- START MAIN -->
<main id="awd-site-main">
<!-- START SECTION -->
<section id="awd-site-content">
<div class="sections-block">
<div class="slides">
<div class="slides-wrap">
<!-- HOME SECTION -->
<div class="slide-item" data-slide-id="home">
<!-- START CONTAINER -->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<!-- START SLIDE CONTENT-->
			<div class="slide-content">
				<div class="row">
					<div class="col-lg-6 col-md-6 svm">
						<div class="section-info text-left">
							<div class="countdown">
								<div id="clock" class="animated" data-animation="fadeIn" data-animation-delay="60"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-5 col-lg-offset-1 col-md-6 svm">
						<div class="section-info text-right">
							<!-- START TITLE -->
							<h2 class="section-title text-default animated" data-animation="fadeIn" data-animation-delay="50">Hey
								Guys!<br> 我们即将上线啦...</h2>
							<!-- END TITLE -->
							<p class="animated" data-animation="fadeIn" data-animation-delay="55">我们的网站正在建设.<br/> 它将是非常棒的网站.</p>
							<a href="#" class="btn go-slide animated" data-animation="fadeIn" data-animation-delay="60" data-slide="about">更多资料</a>
							<a href="#" class="btn btn-inverse go-slide animated" data-animation="fadeIn" data-animation-delay="60" data-slide="subscribe">联系我们!</a>
						</div>
					</div>
				</div>
			</div>
			<!-- END SLIDE CONTENT-->
		</div>
	</div>
</div>
<!-- END CONTAINER -->
</div>
<!-- SUBSCRIBE SECTION -->
<div class="slide-item" data-slide-id="subscribe">
<!-- START CONTAINER -->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<!-- START SLIDE CONTENT-->
			<div class="slide-content">
				<div class="row">
					<div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm">
						<div class="section-info text-right">
							<!-- START TITLE -->
							<h2 class="section-title text-default animated" data-animation="fadeIn" data-animation-delay="60">订阅  <br/> 我们的通讯</h2>
							<!-- END TITLE -->
							<p class="animated" data-animation="fadeIn" data-animation-delay="100">加入我们的邮件通讯.
								<strong>它的快速和容易.</strong><br/> 你将成为第一个知道<br/> 我们项目启动的人.
							</p>
						</div>
					</div>
					<div class="col-md-5 col-md-pull-7 svm">
						<div class="section-info text-left">
							<p><strong>别忘了</strong>点击确认电子邮件,您将会收到以<strong>激活</strong>您的订阅。</p>
							<!-- Subscribe Form -->
							<div class="row">
								<div class="col-md-12 col-md-offset-0 col-sm-8 col-sm-offset-2">
									<form id="subscribe-form" class="subscribe-form" method="post">
										<input type="email" id="subscribe-email"
											   name="subscribe-email" placeholder="请留下你的邮箱地址">
										<button type="submit" id="subscribe-submit" class="btn btn-inverse">
											<span>订阅</span> <i class="fa fa-envelope"></i></button>
										<div class="form-notice subscribe-notice"></div>
									</form>
								</div>
							</div>
							<!-- end Subscribe Form -->
						</div>
					</div>
				</div>
			</div>
			<!-- END SLIDE CONTENT-->
		</div>
	</div>
	<!-- END ROW -->
</div>
<!-- END CONTAINER -->
</div>
<!-- ABOUT SECTION -->
<div class="slide-item" data-slide-id="about">
<!-- START CONTAINER -->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<!-- START SLIDE CONTENT-->
			<div class="slide-content">
				<div class="row">
					<div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm">
						<div class="section-info text-right">
							<!-- START TITLE -->
							<h2 class="section-title text-default animated" data-animation="fadeIn" data-animation-delay="60">关于我们</h2>
							<!-- END TITLE -->
							<p class="animated" data-animation="fadeIn" data-animation-delay="100">公司致力于为客户提供专业的电信增值服务,帮助企业便捷接入验证码短信、短信通知、语音验证码、国际验证码、短信公众号、短信营销、彩信营销、数字奖励营销、手机话费充值、手机流量充值等电信增值服务,满足企业运营、营销推广多场景需要。</p>
						</div>
					</div>
					<div class="col-md-5 col-md-pull-7 svm">
						<div class="section-info text-left">
							<!-- START FEATURES-LIST -->
							<div class="features-list">
								<!-- FEATURE -->
								<div class="featured-item animated" data-animation="fadeIn"
									 data-animation-delay="150">
									<div class="featured-text">
										<h3><i class="fa fa-rocket"></i> 安全高效</h3>
										<p>多年的技术积累与创新,树立在该领域的标杆地位。业务平台及软件全部自主研发,且都通过了国家知识产权认定。</p>
									</div>
								</div>
								<div class="featured-item">
									<!-- FEATURE -->
									<div class="featured-item animated" data-animation="fadeIn"
										 data-animation-delay="150">
										<div class="featured-text">
											<h3><i class="icon-paint"></i> 高性能、高并发</h3>
											<p>在互联网及通讯行业有十几年的技术研发和运营维护经验,掌握高性能、高并发、大数据处理技术。</p>
										</div>
									</div>
								</div>
							</div>
							<!-- END FEATURES-LIST -->
						</div>
					</div>
				</div>
			</div>
			<!-- END SLIDE CONTENT-->
		</div>
	</div>
	<!-- END ROW -->
</div>
<!-- END CONTAINER -->
</div>
<!-- SERVICES SECTION -->
<div class="slide-item" data-slide-id="services">
<!-- START CONTAINER -->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<!-- START SLIDE CONTENT-->
			<div class="slide-content">
				<div class="row">
					<div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm">
						<div class="section-info text-right">
							<!-- START TITLE -->
							<h2 class="section-title text-default animated" data-animation="fadeIn">我们的服务</h2>
							<!-- END TITLE -->
							<p class="animated" data-animation="fadeIn" data-animation-delay="100">若您的账号未经过XXX实名认证,请根据提示完成认证。若您的账号已完成认证,请直接填写入驻信息。通过XXX个人认证的用户入驻完成后成为个人开发者,通过XXX企业认证的用户入驻完成后成为企业开发者。</p>
						</div>
					</div>
					<div class="col-md-5 col-md-pull-7 svm">
						<div class="section-info text-left">
							<!-- SERVICE -->
							<div class="service animated" data-animation="fadeIn" data-animation-delay="150">
								<h3>短信通知</h3>
								<p>3秒可达,三网合一专属通道,与工信部携号转网平台实时互联.99%到达率,短信结合语音验证,服务100%,专线机房,支持大容量、高并发、电信级运维保障,实时监控自动切换</p>
							</div>
							<!-- SERVICE -->
							<div class="service animated" data-animation="fadeIn" data-animation-delay="150">
								<h3>语音通知</h3>
								<p>灵活,支持带入变量,动态语音内容灵活支持业务场景;安全,语音验证难窃取,安全有保障;可靠,支持大容量,高并发,稳定可靠</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- END SLIDE CONTENT-->
		</div>
	</div>
	<!-- END ROW -->
</div>
<!-- END CONTAINER -->
</div>
<!-- CONTACT SECTION -->
<div class="slide-item" data-slide-id="contact">
<!-- START CONTAINER -->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<!-- START SLIDE CONTENT-->
			<div class="slide-content">
				<div class="row">
					<div class="col-lg-5 col-lg-offset-1 col-md-6 col-md-push-6 svm">
						<div class="section-info text-right">
							<!-- START TITLE -->
							<h2 class="section-title text-default animated" data-animation="fadeIn">联系我们</h2>
							<!-- END TITLE -->
							<div class="contact-info">
								<p class="contact-item"><i class="fa fa-phone"></i> 固话: 88888888888</p>
								<p class="contact-item"><i class="fa fa-envelope"></i> 邮箱: 8888@qq.com</p>
								<p class="contact-item"><i class="fa fa-map-marker"></i> 浙江 杭州 </p>
							</div>
							<p class="animated" data-animation="fadeIn" data-animation-delay="100">
								<h3>通信能力创新 让通讯更简单</h3>
								<h5>优质便捷的云通信服务平台</h5>
							</p>
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-md-pull-6 svm">
						<div class="section-info text-left">
						<!-- START CONTACT FORM -->
						<form id="contact-form" class="contact-form">
							<div class="row">
								<div class="col-lg-4 col-md-6 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200">
									<input type="text" name="contact-name" placeholder="真实姓名"
										   class="contact-form-name required">
								</div>
								<div class="col-lg-4 col-md-6 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200">
									<input type="email" name="contact-email" placeholder="电子邮箱"
										   class="contact-form-email required">
								</div>
								<div class="col-lg-4 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200">
									<input type="text" name="contact-subject" placeholder="从事行业"
										   class="contact-form-subject required">
								</div>
								<!-- END COLUMN 4 -->
								<div class="col-md-12 animated" data-animation="fadeIn" data-animation-delay="150">
									<textarea name="contact-message" placeholder="说两句吧..."
											  class="contact-form-message required"
											  rows="4"></textarea>
									<button class="btn btn-block" type="submit" id="submit" name="submit"><span>放飞梦想</span>
										<i class="fa fa-send"></i></button>
								</div>
								<!-- END COLUMN 8 -->
							</div>
							<!-- END ROW -->
							<div class="contact-notice"></div>
						</form>
						<!-- END CONTACT FORM -->
						</div>
					</div>
				</div>
			</div>
			<!-- END SLIDE CONTENT-->
		</div>
	</div>
	<!-- END ROW -->
</div>
<!-- END CONTAINER -->
</div>
</div>
</div>
</div>
</section>
<!-- END SECTION -->
</main>
<!-- END MAIN -->
<footer id="awd-site-footer">
<!-- START COPYRIGHT -->
<div class="copyright animated" data-animation="fadeInUp" data-animation-delay="500">
</div>
<!-- END COPYRIGHT -->
<!-- START SOCIAL ICONS -->
<nav class="social-icons animated" data-animation="fadeInUp" data-animation-delay="500">
	<ul>
		<li title="兼容火狐"><a href="###"><i class="fa fa-firefox"></i></a></li>
		<li title="兼容Opera"><a href="###"><i class="fa fa-opera"></i></a></li>
		<li title="兼容IE"><a href="###"><i class="fa fa-internet-explorer"></i></a></li>
		<li title="兼容谷歌"><a href="###"><i class="fa fa-chrome"></i></a></li>
		<li title="圆象"><a target="_blank" href="#"><i class="fa fa-leaf"></i></a></li>
		<li title="QQ"><a href="###"><i class="fa fa-qq"></i></a></li>
		<li title="WeChat"><a href="###"><i class="fa fa-weixin"></i></a></li>
		<li title="微博"><a href="###"><i class="fa fa-weibo"></i></a></li>
		<li title="开始"><a href="###"><i class="fa fa-windows"></i></a></li>
	</ul>
</nav>
<!-- END SOCIAL ICONS -->
</footer>
</div>
<!-- JS -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 图片头像上传 文件上传 图片切换 文本框 文字切换 下拉框 背景切换 复选 手风琴 单选 选项卡自动切换 登录框 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到