h5-360_introduce页面案例
整个网页的html
首先，忽略我的网页比较丑，主要是ps功底不太好，
其次这个网页是利用了全屏插件：jquery.fullPage.js。需要事先导入相应的js文件
js文件下载地址：http://www.dowebok.com/77.html
js文件网页中有使用教程和一些小案例
整个案例运用了交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/360.css" rel="stylesheet">
<link rel="stylesheet" href="../css/jquery.fullPage.css">
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.fullPage.js"></script>
<script src="../js/jquery.fullPage.min.js"></script>
<style> </style>
</head>
<body>
<div id="360Page">
<div class="section first">
<div class="logo">
<img src="static/images/logo.jpg" alt="">
</div>
<ul class="text1">
<li>4</li>
<li>亿</li>
<li>网</li>
<li>友</li>
<li>共</li>
<li>同</li>
<li>信</li>
<li>赖</li>
</ul>
<div class="text2">
更安全，更爽快，更智能，更时尚
</div>
</div>
<div class="section second">
<div class="shield">
<img src="../img/dp1.png" alt="">
<img src="../img/dp2.png" alt="">
<img src="../img/dp3.png" alt="">
<img src="../img/dp4.png" alt="">
<img src="../img/dp5.png" alt="">
<img src="../img/dp6.png" alt="">
<img src="../img/dp7.png" alt="">
<img src="../img/dp8.png" alt="">
</div>
<div class="info"></div>
</div>
<div class="section third">
<div class="info"></div>
<div class="circle">
<div class="rocket"></div>
</div>
</div>
<div class="section fourth">
<div class="search">
<div class="searchBar"></div>
<div class="searchText"></div>
<div class="searchResult"></div>
</div>
<div class="info"></div>
</div>
<div class="section fifth">
<div class="info"></div>
<div class="subject">
<div class="topBorder"></div>
<div class="bottomBorder"></div>
<div class="leftBorder"></div>
<div class="rightBorder"></div>
<div class="nav">
<div class="icon"></div>
<div class="navHead">
<div class="info"></div>
<div class="minimum"></div>
<div class="maximum"></div>
<div class="close"></div>
</div>
<div class="Address-bar">
<div class="return"></div>
<div class="refresh"></div>
<div class="homepage"></div>
<div class="url">
<div class="quickness"></div>
</div>
<div class="list"></div>
<div class="search-box">
<div class="search"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#360Page').fullpage({
sectionsColor:['#65FFDD',"#77ff2b","#ff7319","#ccbea9","#65ffdd"],
afterLoad:function (anchorLink,index) {
$(".section").removeClass("current");
setTimeout(function () {
$(".section").eq(index-1).addClass("current");
},10);
}
});
});
$(function () {
setTimeout(function () {
$(".first").addClass("current");
},500);
});
</script>
</body>
</html>
页面基本样式：
body,div,img,ul,li{
margin:;
padding:;
}
.section{
overflow: hidden;
}
第一屏最简单：难点就是进入网页的一瞬间中间的（4亿网友共同信赖）是间距从大到小变化，到指定的·点停止。同时透明度慢慢缩小
前：
后：
第一页的css代码：
.first .logo{
width: 390px;
height: 110px;
margin: 100px auto;
}
.first .logo > img{
width: 100%;
height: 100%;
}
.first .text1{
width: 100%;
height: 150px;
line-height: 130px;
text-align: center;
font-size: 130px;
font-weight:bold;
color: #fff;
}
.first .text1 > li{
display:inline;
list-style: none;
margin: 0 40px;
opacity: 0.5;
transition: margin 1s,opacity 1s;
}
.first .text2{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 60px;
font-weight:;
letter-spacing:20px;
color: #fff;
margin-top: 60px;
}
.first.current .text1 > li{
margin: 0 5px;
opacity:;
}
第二屏：主要的难点在transform的运用，进入第二屏的时候开始把一个碎了的盾牌拼凑成一个完整的盾牌
前：
后：
.second > div{
display: flex;
justify-content: space-around;
align-items: center;
}
.second .shield{
width: 404px;
height: 512px;
font-size: 1px;
position: relative;
}
.second .shield>img{
width: 100%;
height: 100%;
position: absolute;
top:;
left:;
transition: transform 1s;
}
.second .info{
width: 800px;
height: 350px;
background: url("../img/info.png");
}
.second .shield > img:nth-of-type(1){
transform: translate(30px,-30px) rotate(30deg);
}
.second .shield > img:nth-of-type(2){
transform: translate(-30px,30px) rotate(-30deg);
}
.second .shield > img:nth-of-type(3){
transform: translate(90px,-90px) rotate(90deg);
}
.second .shield > img:nth-of-type(4){
transform: translate(-90px,90px) rotate(-90deg);
}
.second .shield > img:nth-of-type(5){
transform: translate(-200px,230px) rotate(230deg);
}
.second .shield > img:nth-of-type(6){
transform: translate(-130px,130px) rotate(-130deg);
}
.second .shield > img:nth-of-type(7){
transform: translate(220px,-220px) rotate(220deg);
}
.second .shield > img:nth-of-type(8){
transform: translate(220px,-220px) rotate(30deg);
}
.second.current .shield > img{
transform: none;
}
第三屏：跟第二屏效果差不大多，只是动画从左边变到右边，一个小火箭从左下角飞入，刚进入第三屏的时候是看不见小火箭
前：
后：
第三屏css代码
.third{
position: relative;
}
.third .info{
height: 500px;
width: 800px;
background: url("../img/info2.png");
position: absolute;
left: 50%;
top: 50%;
transform: translate(-100%,-50%);
}
.third .circle{
height: 651px;
width: 650px;
background: url("../img/circle.png");
position: absolute;
right: 50%;
top: 50%;
transform: translate(130%,-50%);
}
.third .circle > .rocket{
height: 500px;
width: 500px;
background: url("../img/rocket.png");
position: absolute;
left: -1000px;
top: 1000px;
transition: top 1s,left 1s;
}
.third.current .circle > .rocket{
top: 40px;
left: 130px;
}
第四屏：难点在左侧的动画分三步完成
第一步：搜座框从左侧进入
第二步：输入框出现字体，出现效果像打字一样一个字一个字的出现
第三步：搜索结果从上到下慢慢显示出来
第四屏css：
/*第四屏样式*/
.fourth{
position: relative;
}
.fourth .search{
width: 595px;
height: 552px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-130%,-50%);
overflow: hidden;
}
.fourth .search > .searchBar{
width: 595px;
height: 70px;
background: url("../img/searchBar.png");
transform: translateX(-100%);
}
.fourth .search > .searchResult{
width: 595px;
height: 0px;
background: url("../img/searchResult.png");
}
.fourth .search > .searchText{
width: 0px;
height: 70px;
background: url("../img/searchText.png");
position: absolute;
top:;
left:;
}
.fourth .info{
width: 800px;
height: 800px;
background: url("../img/info3.png");
position: absolute;
top: 50%;
right: 50%;
transform: translate(100%,-50%);
}
.fourth.current .search > .searchBar{
transform: translateX(0);
transition: transform 1s;
}
.fourth.current .search > .searchText{
width: 280px;
transition: width 1s 1s steps(5);
}
.fourth.current .search > .searchResult{
height: 485px;
transition: height 1s 2s;
}
第五屏:是最难的一屏，也不能说难，只要是元素表较多，整个页面就是拼凑出来的
其实页面上的图标应该用字体图标的，当时脑子一热就都用图片代替了
主要难点就在整个页面的布局和四个边框的动画
前：四条边框是从四个不同方向进入到边框的位置，主体页面透明
后：不透明，边框复位
第五屏css
.fifth{
position: relative;
}
.fifth .info{
width: 1924px;
height: 300px;
background: url("../img/info4.png");
margin: 0 auto;
top:;
}
.fifth .subject{
width: 1700px;
height: 620px;
background: url("../img/subject.png");
margin: 0 auto;
position: relative;
}
.fifth .subject > .topBorder{
width: 1700px;
height: 1px;
background: url("../img/Top and bottom border.png");
position: absolute;
top:;
left: 100%;
}
.fifth.current .subject > .topBorder{
left: 0%;
transition: left 2s;
}
.fifth .subject > .bottomBorder{
width: 1700px;
height: 1px;
background: url("../img/Top and bottom border.png");
position: absolute;
bottom:;
right: 100%;
}
.fifth.current .subject > .bottomBorder{
right: 0%;
transition: right 2s;
}
.fifth .subject > .leftBorder{
width: 1px;
height: 620px;
background: url("../img/Left and right borders.png");
position: absolute;
left:;
bottom: 100%;
}
.fifth.current .subject > .leftBorder{
bottom: 0%;
transition: bottom 2s;
}
.fifth .subject > .rightBorder{
width: 1px;
height: 620px;
background: url("../img/Left and right borders.png");
position: absolute;
right:;
top: 100%;
}
.fifth.current .subject > .rightBorder{
top: 0%;
transition: top 2s;
}
.fifth .subject > .nav{
width: 100%;
height: 100px;
}
.fifth .subject > .nav > .icon{
width: 100px;
height: 100px;
background: url("../img/icon.png");
float: left;
}
.fifth .subject > .nav > .navHead{
width: 1600px;
height: 50%;
float: left;
position: relative;
}
.fifth .subject > .nav > .navHead > .info{
width: 200px;
height: 40px;
background: url("../img/aqllq.png");
float: left;
}
.fifth .subject > .nav > .navHead > .close{
width: 50px;
height: 50px;
background: url("../img/x.png");
position: absolute;
right: 10px;
}
.fifth .subject > .nav > .navHead > .maximum{
width: 50px;
height: 50px;
background: url("../img/zuidahua.png");
position: absolute;
right: 80px;
}
.fifth .subject > .nav > .navHead > .minimum{
width: 50px;
height: 50px;
background: url("../img/zuixiaohua.png");
position: absolute;
right: 150px;
}
.fifth .subject >.nav > .Address-bar{
width: 1580px;
height: 50%;
border: 3px solid #65ffdd;
float: left;
position: relative;
}
.return,.refresh,.homepage,.list{
width: 60px;
height: 100%;
border: 1px solid #65ffdd;
position: absolute;
}
.fifth .subject >.nav > .Address-bar > .return{
left:;
background: url("../img/zuojiantou.png") round;
}
.fifth .subject >.nav > .Address-bar > .refresh{
left: 60px;
background: url("../img/shuaxin.png") round;
}
.fifth .subject >.nav > .Address-bar > .homepage{
left: 120px;
background: url("../img/fangzi.png") round;
}
.fifth .subject >.nav > .Address-bar > .url{
width: 1160px;
height: 100%;
border: 1px solid #65ffdd;
position: absolute;
left: 180px;
}
.fifth .subject >.nav > .Address-bar > .url > .quickness{
width: 60px;
height: 100%;
position: absolute;
right:;
background: url("../img/shandian.png");
}
.fifth .subject >.nav > .Address-bar > .list{
left: 1340px;
background: url("../img/xiajiantou.png") round;
}
.fifth .subject >.nav > .Address-bar > .search-box{
width: 200px;
height: 100%;
border: 1px solid #65ffdd;
position: absolute;
left: 1400px;
}
.fifth .subject >.nav > .Address-bar > .search-box > .search{
width: 60px;
height: 100%;
position: absolute;
right: 10px;
background: url("../img/fangdajing.png") round;
}
.fifth .subject > .nav{
opacity:0.1;
}
.fifth.current .subject > .nav{
opacity:;
transition: opacity 3s;
}
h5-360_introduce页面案例的更多相关文章
- 2017年十大奇葩画风的H5页面案例，原来脑洞可以这样大
每个人都是视觉动物,画面精美.体验奇特的H5,用户在内心一般都会满分打出,毫不吝啬,同时也毫不犹豫分享,因为此时的分享不掉价儿~ 今天给大家准备了十支H5,画风超级奇特,非常值得一看所有案例均可在19 ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- 运用预加载提升H5移动页面的用户体验
原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...
- H5 App页面 绝对定位 软键盘弹出时顶起底部按钮
做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...
- 快速构建H5单页面切换应用
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
- H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- H5公共样式，用于所有H5开发页面
@charset "UTF-8"; /* H5公共样式,用于所有H5开发页面*/ html { font-family: "Microsoft Yahei", ...
随机推荐
- input 数值框处理
<input type="text"> input 若设置type=“number” ,再想对其调用处理的函数是不起作用的,为此,首先将其设为文本类型 当前要求是数字 ...
- jquery获取select选中的文本值
误区: 一直以为jquery获取select中option被选中的文本值,是这样写的: $("#id").text(); //获取所有option的文本值 实际上应该这样: ...
- Android程序的入口点是什么,不是Main()吗
很多初入Android开发的网页可能不知道Android程序的入口点是什么,不是main()吗,当然我相信回复onCreate的在字面上不算错,但是你们想的是Activity中的onCreate 方法 ...
- centos 6.5安装NodeJS
centos 6.5安装NodeJS 下载 可以在本地下载node.js最新版,然后通过ftp工具上传到服务器,或者直接在服务器终端使用wget命令下载(我当时下载的是node-v7.5.0-linu ...
- 七：日期类Date、日期格式化SimpleDateFormat、日历Calendar
日期的格式转换:
- 白手起家Django项目发布中篇_Centos下Python2和3并存环境部署
python环境部署 我们今天学习的内容是如何将Django项目部署到linux服务器上,我们部署的linux系统是centos7首先,我们先在linux上搭建我们的Python3环境: 在这里首先强 ...
- HiBench成长笔记——(9) 分析源码monitor.py
monitor.py 是主监控程序,将监控数据写入日志,并统计监控数据生成HTML统计展示页面: #!/usr/bin/env python2 # Licensed to the Apache Sof ...
- 第1节 IMPALA：7、impala的安装以及配置过程
6.制作本地yum源 镜像源是centos当中下载相关软件的地址,我们可以通过制作我们自己的镜像源指定我们去哪里下载impala的rpm包,这里我们使用httpd这个软件来作为服务端,启动httpd的 ...
- install正常，deploy上传jar失败致使打包失败
[INFO] Scanning for projects...[INFO] [INFO] ------------------------------------------------------- ...
- Unix-Time
1. Unix_time 2. Year_2000_problem 3. Year_10,000_problem 4. Year_2038_problem 5. Time_formatting_and ...