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", ...
随机推荐
- 六 一些常用类：Random、BigInteger、BigDecimal、DecimalFormat
常用类:
- 数据库建表并返回给前端 - (mysql-thinkphp) (3)
1.先建一个表,你可以用mysql代码建,也可以用thinkphp建,也可以视图建,我用不到太复杂的,就用视图建了. 2.配置id为自增,唯一的值,不可重复.主键.要输入中文的选择utf8_gener ...
- Rancher概述
概述 What’s Rancher? Rancher是一套容器管理平台,它可以帮助组织在生产环境中轻松快捷的部署和管理容器. Rancher可以轻松地管理各种环境的Kubernetes,满足IT需求并 ...
- GNS3 模拟icmp重定向
网关实质上是一个网络通向其他网络的IP地址.比如有网络A和网络B,网络A的IP地址范围为“192.168.1.1~192. 168.1.254”,子网掩码为255.255.255.0:网络B的IP地址 ...
- An attempt was made to call the method com.google.gson.GsonBuilder.setLenient()Lcom/google/gson/GsonBuilder; but it does not exist. Its class, com.google.gson.GsonBuilder, is available from the foll
SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/G:/sharp/repo ...
- solus linux 中文输入法
默认用ibus输入框架,安装ibus-libpinyin sudo eopkg install ibus-libpinyin ibus 安装好后重启 在系统设置 -区域和语言中添加中文,(记得自己设置 ...
- 057、Java中break的用法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- 012、MySQL取本月第一天日期，取每个月的第一天日期
#取本月第一天 SELECT DATE_ADD( curdate( ), INTERVAL DAY ); #取往后几个月的第一天 , INTERVAL MONTH ); , INTERVAL MONT ...
- 吴裕雄--天生自然java开发常用类库学习笔记：日期操作类DataFormat、SimpleDataFormat
import java.text.DateFormat ; import java.util.Date ; public class DateDemo03{ public static void ma ...
- Golang的单目(一元)运算符-地址操作符和接收操作符
Golang的单目(一元)运算符-地址操作符和接收操作符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Golang的单目(一元)运算符概述 常见的地址操作符: &: ...