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", ...
随机推荐
- 注意重写类的equals()方法
注意在java中在比较引用类型时==和原生的equals()方法比较的都是看它们否是同一个对象(说的更直白一点就是他们在内存的位置是否是一样的),但我们在真实世界中关注的往往只是其中的某个属性是否相等 ...
- VS中MFC项目文件特别大的解决办法
转 来自http://m.zhizuobiao.com/vc/vc-18082800177/ 自己插个眼 项目文件比较大因为 项目下有个隐藏文件夹.vs 下面是解决办法 本文主要向大家介绍了VC编程 ...
- Vue中复制文本 vue-clipboard2
附上代码,方便复制粘贴 //复制文本 onCopy(meetingId) { let _this = this; getMeetingDetail(meetingId).then(res => ...
- gpg加密和解密
linux:gpg加密和解密 1 创建密钥 2 查看私钥 3 导出公钥 4 导出私钥 5 导入秘钥 5.1 公钥 6 公钥加密 7 私钥解密 创建密钥 gpg --gen-key 你要求输入一下内容, ...
- 2.24 模拟赛 + DIV2 总结
本来实在是不想打了,后来真的手痒. 晚上发现正进行DIV2然后就打了场,模拟,幸好没参加,逆风.排名2400 Codeforces Round #622 (Div. 2) A题十分钟过了 B题http ...
- iplimage 转HBITMAP
HBITMAP IplImage2hBitmap(IplImage* pImg) { cvFlip(pImg, NULL); BYTE tmp[]; BITMAPINFO *bmi = (BITMAP ...
- 洛谷P2296 寻找道路
\(\Large\textbf{Description:} \large {在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件:}\) \ ...
- 我的Grunt之旅-序章
时间:2018-03-05 13:52 事件:安装Grunt 相关网址: grunt官网:https://gruntjs.com node.js下载地址 :https://nodejs.org/en ...
- 困惑我的x++和++x；
刚学习C语言时X++和++X非常不解 目前有了新的领悟 1.X++ int x=0; int z=x++; 此时z?x? 这个问题可以分两步思考 第一步:先把x的值赋予z,此时z=x=0; 第二步:x ...
- Codeforces Round #622 (Div. 2) 题解和我的分析
首先下午场非常适合中国人,开心 A 三种食物有个数限制,上菜,每次上菜跟以前的样式不能一样(食物的种类及个数各不相同),且每种食物最多用一次,问最多能上几次 对a,b,c排序,然后枚举上菜种类就可以了 ...