整个网页的html
首先，忽略我的网页比较丑，主要是ps功底不太好，
其次这个网页是利用了全屏插件：jquery.fullPage.js。需要事先导入相应的js文件
js文件下载地址：http://www.dowebok.com/77.html
js文件网页中有使用教程和一些小案例
整个案例运用了交集选择器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link href="../css/360.css" rel="stylesheet">
7 <link rel="stylesheet" href="../css/jquery.fullPage.css">
8 <script src="../js/jquery-1.8.3.min.js"></script>
9 <script src="../js/jquery.fullPage.js"></script>
10 <script src="../js/jquery.fullPage.min.js"></script>
11 <style>
12
13 </style>
14 </head>
15 <body>
16 <div id="360Page">
17 <div class="section first">
18 <div class="logo">
19 <img src="static/images/logo.jpg" alt="">
20 </div>
21 <ul class="text1">
22 <li>4</li>
23 <li>亿</li>
24 <li>网</li>
25 <li>友</li>
26 <li>共</li>
27 <li>同</li>
28 <li>信</li>
29 <li>赖</li>
30 </ul>
31 <div class="text2">
32 更安全，更爽快，更智能，更时尚
33 </div>
34 </div>
35 <div class="section second">
36 <div class="shield">
37 <img src="../img/dp1.png" alt="">
38 <img src="../img/dp2.png" alt="">
39 <img src="../img/dp3.png" alt="">
40 <img src="../img/dp4.png" alt="">
41 <img src="../img/dp5.png" alt="">
42 <img src="../img/dp6.png" alt="">
43 <img src="../img/dp7.png" alt="">
44 <img src="../img/dp8.png" alt="">
45 </div>
46 <div class="info"></div>
47 </div>
48 <div class="section third">
49 <div class="info"></div>
50 <div class="circle">
51 <div class="rocket"></div>
52 </div>
53 </div>
54 <div class="section fourth">
55 <div class="search">
56 <div class="searchBar"></div>
57 <div class="searchText"></div>
58 <div class="searchResult"></div>
59 </div>
60 <div class="info"></div>
61 </div>
62 <div class="section fifth">
63 <div class="info"></div>
64 <div class="subject">
65 <div class="topBorder"></div>
66 <div class="bottomBorder"></div>
67 <div class="leftBorder"></div>
68 <div class="rightBorder"></div>
69 <div class="nav">
70 <div class="icon"></div>
71 <div class="navHead">
72 <div class="info"></div>
73 <div class="minimum"></div>
74 <div class="maximum"></div>
75 <div class="close"></div>
76 </div>
77 <div class="Address-bar">
78 <div class="return"></div>
79 <div class="refresh"></div>
80 <div class="homepage"></div>
81 <div class="url">
82 <div class="quickness"></div>
83 </div>
84 <div class="list"></div>
85 <div class="search-box">
86 <div class="search"></div>
87 </div>
88 </div>
89 </div>
90 </div>
91 </div>
92 </div>
93 <script>
94 $(function(){
95 $('#360Page').fullpage({
96 sectionsColor:['#65FFDD',"#77ff2b","#ff7319","#ccbea9","#65ffdd"],
97 afterLoad:function (anchorLink,index) {
98 $(".section").removeClass("current");
99 setTimeout(function () {
100 $(".section").eq(index-1).addClass("current");
101 },10);
102 }
103 });
104 });
105 $(function () {
106 setTimeout(function () {
107 $(".first").addClass("current");
108 },500);
109 });
110 </script>
111 </body>
112 </html>
页面基本样式：
1 body,div,img,ul,li{
2 margin: 0;
3 padding: 0;
4 }
5 .section{
6 overflow: hidden;
7 }
第一屏最简单：难点就是进入网页的一瞬间中间的（4亿网友共同信赖）是间距从大到小变化，到指定的·点停止。同时透明度慢慢缩小
前：
后：
第一页的css代码：
1 .first .logo{
2 width: 390px;
3 height: 110px;
4 margin: 100px auto;
5 }
6 .first .logo > img{
7 width: 100%;
8 height: 100%;
9 }
10 .first .text1{
11 width: 100%;
12 height: 150px;
13 line-height: 130px;
14 text-align: center;
15 font-size: 130px;
16 font-weight:bold;
17 color: #fff;
18 }
19 .first .text1 > li{
20 display:inline;
21 list-style: none;
22 margin: 0 40px;
23 opacity: 0.5;
24 transition: margin 1s,opacity 1s;
25
26 }
27 .first .text2{
28 width: 100%;
29 height: 60px;
30 line-height: 60px;
31 text-align: center;
32 font-size: 60px;
33 font-weight:200;
34 letter-spacing:20px;
35 color: #fff;
36 margin-top: 60px;
37
38 }
39 .first.current .text1 > li{
40 margin: 0 5px;
41 opacity: 1;
42 }
第二屏：主要的难点在transform的运用，进入第二屏的时候开始把一个碎了的盾牌拼凑成一个完整的盾牌
前：
后：
1 .second > div{
2 display: flex;
3 justify-content: space-around;
4 align-items: center;
5 }
6 .second .shield{
7 width: 404px;
8 height: 512px;
9 font-size: 1px;
10 position: relative;
11 }
12 .second .shield>img{
13 width: 100%;
14 height: 100%;
15 position: absolute;
16 top: 0;
17 left: 0;
18 transition: transform 1s;
19 }
20
21 .second .info{
22 width: 800px;
23 height: 350px;
24 background: url("../img/info.png");
25 }
26 .second .shield > img:nth-of-type(1){
27 transform: translate(30px,-30px) rotate(30deg);
28 }
29 .second .shield > img:nth-of-type(2){
30 transform: translate(-30px,30px) rotate(-30deg);
31 }
32 .second .shield > img:nth-of-type(3){
33 transform: translate(90px,-90px) rotate(90deg);
34 }
35 .second .shield > img:nth-of-type(4){
36 transform: translate(-90px,90px) rotate(-90deg);
37 }
38 .second .shield > img:nth-of-type(5){
39 transform: translate(-200px,230px) rotate(230deg);
40 }
41 .second .shield > img:nth-of-type(6){
42 transform: translate(-130px,130px) rotate(-130deg);
43 }
44 .second .shield > img:nth-of-type(7){
45 transform: translate(220px,-220px) rotate(220deg);
46 }
47 .second .shield > img:nth-of-type(8){
48 transform: translate(220px,-220px) rotate(30deg);
49 }
50 .second.current .shield > img{
51 transform: none;
52 }
第三屏：跟第二屏效果差不大多，只是动画从左边变到右边，一个小火箭从左下角飞入，刚进入第三屏的时候是看不见小火箭
前：
后：
第三屏css代码
1 .third{
2 position: relative;
3 }
4 .third .info{
5 height: 500px;
6 width: 800px;
7 background: url("../img/info2.png");
8 position: absolute;
9 left: 50%;
10 top: 50%;
11 transform: translate(-100%,-50%);
12 }
13 .third .circle{
14 height: 651px;
15 width: 650px;
16 background: url("../img/circle.png");
17 position: absolute;
18 right: 50%;
19 top: 50%;
20 transform: translate(130%,-50%);
21 }
22
23 .third .circle > .rocket{
24 height: 500px;
25 width: 500px;
26 background: url("../img/rocket.png");
27 position: absolute;
28 left: -1000px;
29 top: 1000px;
30 transition: top 1s,left 1s;
31 }
32 .third.current .circle > .rocket{
33 top: 40px;
34 left: 130px;
35 }
第四屏：难点在左侧的动画分三步完成
第一步：搜座框从左侧进入
第二步：输入框出现字体，出现效果像打字一样一个字一个字的出现
第三步：搜索结果从上到下慢慢显示出来
第四屏css：
1 /*第四屏样式*/
2 .fourth{
3 position: relative;
4 }
5 .fourth .search{
6 width: 595px;
7 height: 552px;
8 position: absolute;
9 top: 50%;
10 left: 50%;
11 transform: translate(-130%,-50%);
12 overflow: hidden;
13 }
14 .fourth .search > .searchBar{
15 width: 595px;
16 height: 70px;
17 background: url("../img/searchBar.png");
18 transform: translateX(-100%);
19 }
20 .fourth .search > .searchResult{
21 width: 595px;
22 height: 0px;
23 background: url("../img/searchResult.png");
24 }
25 .fourth .search > .searchText{
26 width: 0px;
27 height: 70px;
28 background: url("../img/searchText.png");
29 position: absolute;
30 top: 0;
31 left: 0;
32 }
33 .fourth .info{
34 width: 800px;
35 height: 800px;
36 background: url("../img/info3.png");
37 position: absolute;
38 top: 50%;
39 right: 50%;
40 transform: translate(100%,-50%);
41 }
42 .fourth.current .search > .searchBar{
43 transform: translateX(0);
44 transition: transform 1s;
45 }
46 .fourth.current .search > .searchText{
47 width: 280px;
48 transition: width 1s 1s steps(5);
49 }
50 .fourth.current .search > .searchResult{
51 height: 485px;
52 transition: height 1s 2s;
53 }
第五屏:是最难的一屏，也不能说难，只要是元素表较多，整个页面就是拼凑出来的
其实页面上的图标应该用字体图标的，当时脑子一热就都用图片代替了
主要难点就在整个页面的布局和四个边框的动画
前：四条边框是从四个不同方向进入到边框的位置，主体页面透明
后：不透明，边框复位
第五屏css
1 .fifth{
2 position: relative;
3 }
4 .fifth .info{
5 width: 1924px;
6 height: 300px;
7 background: url("../img/info4.png");
8 margin: 0 auto;
9 top: 0;
10 }
11 .fifth .subject{
12 width: 1700px;
13 height: 620px;
14 background: url("../img/subject.png");
15 margin: 0 auto;
16 position: relative;
17 }
18 .fifth .subject > .topBorder{
19 width: 1700px;
20 height: 1px;
21 background: url("../img/Top and bottom border.png");
22 position: absolute;
23 top: 0;
24 left: 100%;
25 }
26 .fifth.current .subject > .topBorder{
27 left: 0%;
28 transition: left 2s;
29 }
30 .fifth .subject > .bottomBorder{
31 width: 1700px;
32 height: 1px;
33 background: url("../img/Top and bottom border.png");
34 position: absolute;
35 bottom: 0;
36 right: 100%;
37 }
38 .fifth.current .subject > .bottomBorder{
39 right: 0%;
40 transition: right 2s;
41 }
42 .fifth .subject > .leftBorder{
43 width: 1px;
44 height: 620px;
45 background: url("../img/Left and right borders.png");
46 position: absolute;
47 left: 0;
48 bottom: 100%;
49 }
50 .fifth.current .subject > .leftBorder{
51 bottom: 0%;
52 transition: bottom 2s;
53 }
54 .fifth .subject > .rightBorder{
55 width: 1px;
56 height: 620px;
57 background: url("../img/Left and right borders.png");
58 position: absolute;
59 right: 0;
60 top: 100%;
61 }
62 .fifth.current .subject > .rightBorder{
63 top: 0%;
64 transition: top 2s;
65 }
66 .fifth .subject > .nav{
67 width: 100%;
68 height: 100px;
69 }
70 .fifth .subject > .nav > .icon{
71 width: 100px;
72 height: 100px;
73 background: url("../img/icon.png");
74 float: left;
75 }
76 .fifth .subject > .nav > .navHead{
77 width: 1600px;
78 height: 50%;
79 float: left;
80 position: relative;
81 }
82
83 .fifth .subject > .nav > .navHead > .info{
84 width: 200px;
85 height: 40px;
86 background: url("../img/aqllq.png");
87 float: left;
88 }
89 .fifth .subject > .nav > .navHead > .close{
90 width: 50px;
91 height: 50px;
92 background: url("../img/x.png");
93 position: absolute;
94 right: 10px;
95 }
96 .fifth .subject > .nav > .navHead > .maximum{
97 width: 50px;
98 height: 50px;
99 background: url("../img/zuidahua.png");
100 position: absolute;
101 right: 80px;
102 }
103 .fifth .subject > .nav > .navHead > .minimum{
104 width: 50px;
105 height: 50px;
106 background: url("../img/zuixiaohua.png");
107 position: absolute;
108 right: 150px;
109 }
110 .fifth .subject >.nav > .Address-bar{
111 width: 1580px;
112 height: 50%;
113 border: 3px solid #65ffdd;
114 float: left;
115 position: relative;
116 }
117 .return,.refresh,.homepage,.list{
118 width: 60px;
119 height: 100%;
120 border: 1px solid #65ffdd;
121 position: absolute;
122 }
123 .fifth .subject >.nav > .Address-bar > .return{
124 left: 0;
125 background: url("../img/zuojiantou.png") round;
126 }
127 .fifth .subject >.nav > .Address-bar > .refresh{
128 left: 60px;
129 background: url("../img/shuaxin.png") round;
130 }
131 .fifth .subject >.nav > .Address-bar > .homepage{
132 left: 120px;
133 background: url("../img/fangzi.png") round;
134 }
135 .fifth .subject >.nav > .Address-bar > .url{
136 width: 1160px;
137 height: 100%;
138 border: 1px solid #65ffdd;
139 position: absolute;
140 left: 180px;
141 }
142 .fifth .subject >.nav > .Address-bar > .url > .quickness{
143 width: 60px;
144 height: 100%;
145 position: absolute;
146 right: 0;
147 background: url("../img/shandian.png");
148 }
149 .fifth .subject >.nav > .Address-bar > .list{
150 left: 1340px;
151 background: url("../img/xiajiantou.png") round;
152 }
153 .fifth .subject >.nav > .Address-bar > .search-box{
154 width: 200px;
155 height: 100%;
156 border: 1px solid #65ffdd;
157 position: absolute;
158 left: 1400px;
159 }
160 .fifth .subject >.nav > .Address-bar > .search-box > .search{
161 width: 60px;
162 height: 100%;
163 position: absolute;
164 right: 10px;
165 background: url("../img/fangdajing.png") round;
166 }
167 .fifth .subject > .nav{
168 opacity:0.1;
169 }
170 .fifth.current .subject > .nav{
171 opacity:1;
172 transition: opacity 3s;
173 }