1 /*all tag统配符*/

2 *{

3 magin:0;

4 padding:0;

5 border:none;

6 font-size:1.5625vw;

7 font-family:"Microsoft YaHei";

8 }

9 html,body{

10 height:100%;/*给html和body加一个高度，因为html和body都是块状元素，而块状元素的特点就是默认高度为0，由内容将它撑开*/

11 overflow:hidden;/*overflow 属性规定当内容溢出元素框时发生的事情。*/

12 }

13

14 /*music部分*/

15 .music{

16 position:fixed;/*固定*/

17 top:3vh;

18 right:4vw;

19 z-index:5;/*不会有东西遮住它*/

20 width:15vw;

21 height:15vw;

22 border:4px solid #ef1639;

23 border-radius:50%;/*使光盘的边为圆形*/

24 background:#fff;/**/

25 }

26 .music > img:first-of-type{/*> 直接后代选择器;first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。*/

27 position:absolute;

28 top:24%;

29 right:2.5%;

30 z-index:1;/*指针图片在上面*/

31 width:28.421%;

32 }

33 .music > img:last-of-type{/*选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素*/

34 position:absolute;

35 top:0;

36 right:0;

37 bottom:0;

38 left:0;

39 margin:auto;

40 width:79%;

41 }

42 /*特效部分*/

43 .music > img.play{/*给class="play"控制光盘转动*/

44 -webkit-animation:music_disc 4s linear infinite;/*4s一个周期 等速 重复*/

45 -o-animation:music_disc 4s linear infinite;

46 animation:music_disc 4s linear infinite;

47 }

48 /*因为是手机端不考虑-o-(Opera)*/

49 @-webkit-keyframes music_disc{/*光盘转动*/

50 0% {51 -webkit-transform:rotate(0deg);/*rotate旋转*/

52 -ms-transform:rotate(0deg);

53 /*-o-transform: rotate(0deg);*/

54 transform:rotate(0deg);

55 }

56 100%{

57 -webkit-transform:rotate(360deg);

58 -ms-transform:rotate(360deg);

59 transform:rotate(360deg);

60 }

61 }62 /*使用@keyframes规则，你可以创建动画。63 创建动画是通过逐步改变从一个CSS样式设定到另一个。64 在动画过程中，您可以更改CSS样式的设定多次。65 指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。66 0％是开头动画，100％是当动画完成。*/

67

68 /*page bg*/

69 .page{

70 position:absolute;/*3个页面完全重叠*/

71 width:100%;/*absolute之后没有宽度，所以给一个宽度*/

72 height:100%;/*给背景加一个高度，但是在没有给html和body加高度之前没有用*/

73 }

74 .page > .bg{

75 position:absolute;/*背景肯定要绝对定位*/

76 z-index:-1;/*让背景在最下层*/

77 width:100%;

78 height:100%;

79 }

80 /*page1*/

81 #page1{

82 display:block;

83 }

84 #page1 > .bg{

85 background:url("../images/p1_bg.jpg") no-repeat center;

86 background-size:100%;/*让图片充斥整个背景*/

87 }

88 #page1 > .p1_lantern{/*第一页的灯笼*/

89 position:absolute;

90 color:white;

91 top:-3.4%;

92 right:0;

93 left:0;

94 margin:auto;

95 background:url("../images/p1_lantern.png") no-repeat center bottom;/*不重复 居中 上下在底部*/

96 background-size:100%;

97 width:45vw;

98 height:71.2vh;

99 font-size:3.506rem;

100 padding-top:31vh;

101 text-align:center;/*文字居中*/

102

103 box-sizing:border-box;/*box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。*/

104 -webkit-box-sizing:border-box;/*兼容性*/

105 -moz-box-sizing:border-box;

106 -ms-box-sizing:border-box;

107 -o-box-sizing:border-box;

108 }

109 #page1 > .p1_lantern:before{ /*光芒闪耀；before在内容之前，文字前面*/

110 position:absolute;

111 top:0;

112 right:0;

113 bottom:0;

114 left:0;

115 z-index:-1;

116 content:"";

117 margin:auto;

118 width:30vw;

119 height:30vw;

120 background:#d60b3b;

121 opacity:.5; /*透明度*/

122 border-radius:50%; /*设光为圆形*/

123

124 box-shadow:0 0 10vw 10vw #d60b3b; /*阴影*/

125 -webkit-box-shadow:0 0 10vw 10vw #d60b3b; /*兼容性*/

126 -moz-box-shadow:0 0 10vw 10vw #d60b3b;

127 -ms-box-shadow:0 0 10vw 10vw #d60b3b;

128 -o-box-shadow:0 0 10vw 10vw #d60b3b;

129

130 /*特效部分*/

131 -webkit-animation:p1_lantern .5s infinite alternate; /*闪烁0.5秒 不重复 可以反向(从大到小从小到大)*/

132 -o-animation:p1_lantern .5s infinite alternate;

133 animation:p1_lantern .5s infinite alternate;

134 }

135 @-webkit-keyframes p1_lantern{

136 0% {137 opacity:.5;

138 -webkit-transform:scale(.8,.8);/*scale缩小*/

139 transform:scale(.8,.8);/*水平80% 竖直80%*/

140 }

141 100%{

142 opacity:1;

143 }

144 }145 @keyframes p1_lantern{

146 0% {147 opacity:.5;

148 -webkit-transform:scale(.8,.8);/*scale缩小*/

149 transform:scale(.8,.8);/*水平80% 竖直80%*/

150 }

151 100%{

152 opacity:1;

153 }

154 }155

156 #page1 > .baozi{

157 position:absolute;

158 right:0;

159 left:0;

160 bottom:2.6vh;

161 background:url("../images/baozi.png") no-repeat center;

162 width:30vw;

163 height:28.63vh;

164 margin:auto;

165 }

166 #page1 > .p1_words{

167 font-size:2.134rem;

168 position:absolute;

169 right:0;

170 bottom:48px;

171 left:0;

172 text-align:center;

173 color:#231815;

174 }

175

176 /*page2*/

177 #page2{

178 display:none;

179 -webkit-transition:.5s;/*transition过渡*/

180 transition:.5s;

181 }

182 /*特效部分*/

183 #page2.fadeOut{ /*第二页自动离开*/

184 opacity:.3;/*transform变换*/

185 -webkit-transform:translate(0,-100%);

186 transform:translate(0,-100%);/*偏移：水平 竖直*/

187 }

188 /*过渡小效果*/

189 #page2 .bg p2_bg_loading{

190 z-index:4;

191 background:#ef1639;

192 -webkit-animation:p2_bg_loading 1s linear forwards;/*forwards动画完成后，保持最后一个属性值*/

193 animation:p2_bg_loading 1s linear forwards;

194 }

195 @-webkit-keyframes p2_bg_loading{

196 0% {197 opacity:1;

198 }

199 100%{

200 opacity:0;

201 }

202 }203 @keyframes p2_bg_loading{

204 0% {205 opacity:1;

206 }

207 100%{

208 opacity:0;

209 }

210 }211

212 #page2 > .bg{

213 background:url("../images/p2_bg.jpg") no-repeat center;

214 background-size:100%;/*让图片充斥整个背景*/

215 }

216 #page2 > .p2_circle{/*外圈*/

217 position:absolute;

218 top:0;

219 right:0;

220 bottom:0;

221 left:0;

222 margin:auto;

223 /*border-radius: 50%;224 content:"";*//*因为本身就是一个圆形图片，所以写不写都无所谓*/

225 background:url("../images/p2_circle_outer.png") no-repeat center;

226 background-size:100%;

227 width:59.375vw;

228 height:59.375vw;

229

230 /*特效部分*/

231 -webkit-animation:p2_circle_outer 1s linear 3s infinite;/*1s圈 等速 延迟3s再转 重复*/

232 -o-animation:p2_circle_outer 1s linear 3s infinite;

233 animation:p2_circle_outer 1s linear 3s infinite;

234 }

235 @-webkit-keyframes p2_circle_outer{

236 0% {237 -webkit-transform:rotate(0deg);/*rotate旋转*/

238 transform:rotate(0deg);

239 }

240 100%{

241 -webkit-transform:rotate(-360deg);/*逆转1圈*/

242 transform:rotate(-360deg);

243 }

244 }245 @keyframes p2_circle_outer{

246 0% {247 -webkit-transform:rotate(0deg);/*rotate旋转*/

248 transform:rotate(0deg);

249 }

250 100%{

251 -webkit-transform:rotate(-360deg);/*逆转1圈*/

252 transform:rotate(-360deg);

253 }

254 }255

256 #page2 > .p2_circle:before{/*中圈*/

257 position:absolute;

258 top:0;

259 right:0;

260 bottom:0;

261 left:0;

262 margin:auto;

263 /*border-radius: 50%;264 content:"";*/

265 border-radius:50%;

266 content:"";

267 background:url("../images/p2_circle_middle.png") no-repeat center;

268 background-size:100%;

269 width:45.625vw;

270 height:45.625vw;

271

272 /*特效部分*/

273 -webkit-animation:p2_circle_middle 1s linear 2s infinite;/*1s圈 等速 延迟2s再转 重复*/

274 -o-animation:p2_circle_middle 1s linear 2s infinite;

275 animation:p2_circle_middle 1s linear 2s infinite;

276 }

277 @-webkit-keyframes p2_circle_middle{

278 0% {279 -webkit-transform:rotate(0deg);/*rotate旋转*/

280 transform:rotate(0deg);

281 }

282 100%{

283 -webkit-transform:rotate(720deg);/*顺转2圈*/

284 transform:rotate(720deg);

285 }

286 }287 @keyframes p2_circle_middle{

288 0% {289 -webkit-transform:rotate(0deg);/*rotate旋转*/

290 transform:rotate(0deg);

291 }

292 100%{

293 -webkit-transform:rotate(720deg);/*顺转2圈*/

294 transform:rotate(720deg);

295 }

296 }297

298 #page2 > .p2_circle:after{/*内圈*/

299 position:absolute;

300 top:0;

301 right:0;

302 bottom:0;

303 left:0;

304 margin:auto;

305 /*border-radius: 50%;306 content:"";*/

307 border-radius:50%;

308 content:"";

309 background:url("../images/p2_circle_inner.png") no-repeat center;

310 background-size:100%;

311 width:39.9375vw;

312 height:39.9375vw;

313

314 /*特效部分*/

315 -webkit-animation:p2_circle_inner 1s linear 1s infinite;/*1s圈 等速 延迟1s再转 重复*/

316 -o-animation:p2_circle_inner 1s linear 1s infinite;

317 animation:p2_circle_inner 1s linear 1s infinite;

318 }

319 @-webkit-keyframes p2_circle_inner{

320 0% {321 -webkit-transform:rotate(0deg);/*rotate旋转*/

322 transform:rotate(0deg);

323 }

324 100%{

325 -webkit-transform:rotate(-1080deg);/*逆转3圈*/

326 transform:rotate(-1080deg);

327 }

328 }329 @keyframes p2_circle_inner{

330 0% {331 -webkit-transform:rotate(0deg);/*rotate旋转*/

332 transform:rotate(0deg);

333 }

334 100%{

335 -webkit-transform:rotate(-1080deg);/*逆转3圈*/

336 transform:rotate(-1080deg);

337 }

338 }339 #page2 > .p2_2018{

340 position:absolute;

341 top:0;

342 right:0;

343 bottom:0;

344 left:0;

345 margin:auto;

346 background:url("../images/p2_2018.png") no-repeat center;

347 background-size:100%;

348 width:27.5vw;

349 height:6.24vh;

350

351 /*特效部分*/

352 -webkit-animation:p2_2018 .5s infinite alternate; /*闪烁0.5秒 无限 可以反向(从大到小从小到大)*/

353 -o-animation:p2_2018 .5s infinite alternate;

354 animation:p2_2018 .5s infinite alternate;

355 }

356 @-webkit-keyframes p2_2018{

357 0% {358 opacity:.5;

359 -webkit-transform:scale(.5,.5);/*scale缩小*/

360 transform:scale(.5,.5);/*水平80% 竖直80%*/

361 }

362 100%{

363 opacity:1;

364 }

365 }366 @keyframes p2_2018{

367 0% {368 opacity:.5;

369 -webkit-transform:scale(.5,.5);/*scale缩小*/

370 transform:scale(.5,.5);/*水平80% 竖直80%*/

371 }

372 100%{

373 opacity:1;

374 }

375 }376

377

378 /*page3*/

379 #page3{

380 display:none;

381 -webkit-transition:.5s;/*transition过渡*/

382 transition:.5s;

383 }

384 /*特效部分*/

385 #page3.fadeIn{/*第三页进入*/

386 -webkit-transform:translate(0,-100%);/*从下面上来*/

387 transform:translate(0,-100%);/*偏移：水平 竖直*/

388 }

389 #page3 > .bg{

390 background:url("../images/p3_bg.jpg") no-repeat center;

391 background-size:100%;/*让图片充斥整个背景*/

392 }

393 #page3 > .p3_logo{

394 width:28.6875vw;

395 height:30.327vh;

396 position:absolute;

397 top:0;

398 right:0;

399 left:0;

400 margin:auto;

401 background:url("../images/baozi.png") no-repeat center;

402 background-size:100%;

403 }

404 #page3 > .p3_title{

405 width:48.125vw;

406 height:50vh;

407 position:absolute;

408 top:21vh;

409 right:0;

410 left:0;

411 margin:auto;

412 background:url("../images/p3_title.png") no-repeat center;

413 background-size:100%;

414

415 /*特效部分*/

416 -webkit-animation:p3_title 1.5s infinite; /*闪烁1.5秒*/

417 -o-animation:p3_title 1.5s infinite;

418 animation:p3_title 1.5s infinite;

419 }

420 @-webkit-keyframes p3_title{

421 0% {422 opacity:0;

423 }

424 100%{

425 opacity:1;

426 }

427 }428 @keyframes p3_title{

429 0% {430 opacity:0;

431 }

432 100%{

433 opacity:1;

434 }

435 }436

437 #page3 > .p3_blessing{

438 width:32vw;

439 height:32vw;

440 position:absolute;

441 right:0;

442 bottom:10vh;

443 left:0;

444 margin:auto;

445 /*border-radius: 50%;*/

446 background:url("../images/p3_blessing.png") no-repeat center;

447 background-size:100%;

448

449 /*特效部分*/

450 -webkit-animation:p3_blessing 2s linear infinite;/*2s一个周期 等速 重复*/

451 animation:p3_blessing 2s linear infinite;

452 }

453 @-webkit-keyframes p3_blessing{

454 0% {455 -webkit-transform:rotate(0deg);/*rotate旋转*/

456 transform:rotate(0deg);

457 }

458 100%{

459 -webkit-transform:rotate(360deg);/*顺转1圈*/

460 transform:rotate(360deg);

461 }

462 }463 @keyframes p3_blessing{

464 0% {465 -webkit-transform:rotate(0deg);/*rotate旋转*/

466 transform:rotate(0deg);

467 }

468 100%{

469 -webkit-transform:rotate(360deg);/*顺转1圈*/

470 transform:rotate(360deg);

471 }

472 }