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", ...
随机推荐
- luogu P2765 魔术球问题
题目中没有说球的上限是多少,只告诉了柱子,那么我们就应该以柱子为界去增加球,考虑将每两个能组成完全平方数的点连边,就形成了一个DAG(有向无环图),由于是DAG,可以转换为最小覆盖问题,即最多有n条路 ...
- 4K对齐
4K对齐这个概念常常与固态硬盘联系起来.买了一块固态硬盘,装机过程中时有忽略4K对齐这个小细节,但是这个小细节往往十分重要,它影响硬盘的使用寿命和速度. 现在来了解一下4K对齐到底是个什么东西. 一. ...
- js 对象补充
js 对象 普通对象与对象简写 js 没有字典类型,只有对象类型,对象可以完全替代字典来使用 js 中对象的属性名,都采用字符串类型,所以就可以省略字符串的引号标识 对象中属性值为函数时,称之为方法, ...
- jmeter简单压测、下载文件
一.jmeter做简单压测(单机) 1.添加需要压测的HTTP请求 2.添加聚合报告 3.设置压测场景 4.查看聚合报告 二.多机同时进行压测 1.在需要连接的电脑上打开jmeter bin目录下的 ...
- 解决物理机U盘安装Kali Linux2018.1，光驱无法加载问题
1.无效的方法: (1)执行 df -m,然后查看U盘设备是否挂载到了/media,导致cd-rom不能被挂载,执行 umount /media. (2)在光驱加载安装界面,把U盘拔下换到电脑的另外 ...
- 软件管理-RPM命令管理：安装升级与卸载
1.包名与包全名 包名 : 操作已经安装的软件包时,使用包名:系统会搜索var/lib/rpm中的数据库 包全名: 操作的包时没有安装的软件包时,使用包全名,而且注意路径 2.RPM安装 切换到光盘p ...
- Linux每日练习-awk命令的内外部变量传递20200225
- centos yum安装redis，nginx
先安装源 yum install epel-release 之后 分别安装redis,nginx
- centos6.7开启linux虚拟机内部错误
如图 这个需要用管理员身份运行就好了 右键----->以管理员身份打开,正常启动
- 001、JAVA开发环境安装与eclipse软件第一印象
折腾了快1个星期,一直没有成功装好JAVA环境,eclipse一直打不开,java环境配置的问题真是不得不吐槽一下,太烂了.今天反反复复折腾好久,终于搞定了.用的金山毒霸,方法如下: 一.打开金山毒霸 ...