<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js制作网易邮箱6.0介绍页面演示_dowebok</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
* { margin: 0; padding: 0;}
body { font: 16px/1.8 "Microsoft Yahei",verdana;}
/* 右侧导航 */
#fullPage-nav { _display: none; font-size: 12px;}
#fullPage-nav li { width: 90px; height: 21px; margin: 10px 0 0; vertical-align: middle;}
#fullPage-nav li a { float: right; width: 21px; height: 21px; color: #8F9DA4; text-decoration: none; text-align: right; background: url(images/dot.png) 5px 5px no-repeat;}
#fullPage-nav li .active { background-position: 0 bottom;}
#fullPage-nav span { display: none;}
.fullPage-tooltip { float: left; top: 0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #8F9DA4; line-height: 21px;}
.section { position: relative; overflow: hidden;}
.section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.section .bg img { display: block; width: 100%; height: 100%;}
.bg11 { position: absolute; bottom: 0; width: 100%; height: 850px; background: url(images/bg11.png) 50% 0 no-repeat; transition: all 1s;}
.bg12 { position: absolute; bottom: -392px; width: 100%; height: 392px; background: url(images/bg12.png) 50% 0 no-repeat; opacity: 0; transition: all 1.7s; bottom: 90px\0;}
.bg13 { position: absolute; bottom: -377px; width: 100%; height: 377px; background: url(images/bg13.png) 50% 0 no-repeat; transition: all 1s;}
.hgroup { position: absolute; width: 554px; height: 176px; left: 50%; top: 25%; margin: 0 0 0 -277px; text-indent: -9999px; background-image: url(images/slogan.png); opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.p11 { position: absolute; left: 50%; top: 50%; width: 600px; margin: 0 0 0 -280px; font-size: 14px; color: #94a7c6; opacity: 0; transition: all 0.5s;}
.mail { position: absolute; left: 50%; top: -26px; width: 375px; height: 26px; margin-left: -187px; background-image: url(images/logo.png); transition: all 1s;}
.mail { float: left; height: 26px; text-indent: -9999px;}
.mail-163 { float: left; width: 107px;}
.mail-126 { float: left;width: 108px; margin-left: 23px;}
.mail-yeah { float: right; width: 115px;}
.bg21 { position: absolute; left: 50%; bottom: 15%; width: 819px; height: 250px; margin-left: -608px; margin-bottom: 40px; background: url(images/bg21.png) 0 0 no-repeat; transition: all 1s; opacity: 0; margin-left: -1108px;}
.bg22 { position: absolute; left: 50%; bottom: 15%; width: 819px; height: 299px; margin-left: -280px; margin-bottom: 70px; background: url(images/bg22.png) right 0 no-repeat; transition: all 1s; opacity: 0; margin-left: 320px;}
.bg23 { position: absolute; left: 50%; bottom: 15%; width: 819px; height: 325px; margin-left: -409px; background: url(images/bg23.png) 50% 0 no-repeat; transition: all 1s; bottom: -40%;}
.section strong { position: absolute; left: 50%; top: 15%; z-index: 10; width: 512px; height: 45px; margin-left: -256px; font-size: 24px; font-weight: 500; color: #748A9E; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.section h3 { position: absolute; left: 50%; top: 15%; z-index: 10; width: 512px; height: 45px; margin-left: -256px; margin-top: 60px; text-indent: -9999px; background-repeat: no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.p1 { position: absolute; left: 50%; top: 15%; width: 510px; margin-left: -255px; margin-top: 130px; font-size: 16px; color: #727F8C; opacity: 0; transition: all 1s;}
.section2 h3 { background-image: url(images/t2.png);}
.section3 h3 { background-image: url(images/t3.png);}
.section4 h3 { background-image: url(images/t4.png);}
.section5 h3 { background-image: url(images/t5.png);}
.section6 strong { width: 561px; margin-left: -280px;}
.section6 h3 { width: 561px; margin-left: -280px; background-image: url(images/t6.png);}
.section7 strong { width: 561px; margin-left: -280px;}
.section7 h3 { width: 561px; margin-left: -280px; background-image: url(images/t7.png);}
.section8 strong { width: 561px; margin-left: -280px;}
.section8 h3 { width: 561px; margin-left: -280px; background-image: url(images/t8.png);}
.section9 strong { width: 609px; margin-left: -304px;}
.section9 h3 { width: 609px; margin-left: -304px; background-image: url(images/t9.png);}
.section9 h3 span { position: absolute; left: -100px; top: -48px; width: 89px; height: 90px; background-image: url(images/yixin.png);}
.bg31 { position: absolute; left: 50%; bottom: 0; width: 892px; height: 472px; margin-left: -396px; margin-bottom: 80px; background-image: url(images/bg31.png); opacity: 0; transition: all 1s;}
.bg32 { position: absolute; left: 50%; bottom: 0; width: 892px; height: 472px; margin-left: -396px; background: url(images/bg32.png) 470px bottom no-repeat; opacity: 0; transition: all 1s;}
.bg33 { position: absolute; left: 50%; bottom: 0; width: 441px; height: 380px; margin-left: 50%; background: url(images/bg33.png) 0 0 no-repeat; opacity: 0; transition: all 1s;}
.p3 { position: absolute; width: 430px; left: 50%; top: 15%; margin-top: 250px; margin-left: -100%; font-size: 16px; color: #FFFDE1; opacity: 0; transition: all 1s;}
.bg41 { position: absolute; bottom: -372px; width: 100%; height: 372px; background: url(images/bg41.png) 50% 0 no-repeat; transition: all 1s;}
.bg42 { position: absolute; bottom: -449px; width: 100%; height: 449px; background: url(images/bg42.png) 50% 0 no-repeat; transition: all 1s;}
.bg43 { position: absolute; bottom: -449px; width: 100%; height: 449px; margin-bottom: -130px; background: url(images/bg43.png) 50% 0 no-repeat; transition: all 1s;}
.bg51, .bg52, .bg53, .bg54 { position: absolute; z-index: 1; width: 208px; left: 50%; bottom: 20%; padding-top: 210px; color: #fff;}
.section5 h4 { margin-bottom: 12px; font-size: 23px; font-weight: 500;}
.section5 p { font-size: 14px;}
.bg51 { margin-left: -851px; background: url(images/bg51.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg52 { margin-left: -403px; background: url(images/bg52.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg53 { margin-left: 195px; background: url(images/bg53.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg54 { margin-left: 645px; background: url(images/bg54.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg61 { position: absolute; top: -454px; width: 100%; height: 545px; background: url(images/bg61.png) 50% 0 no-repeat; transition: all 1s;}
.bg62 { position: absolute; left: 10%; bottom: 20%; width: 597px; height: 284px; margin-left: -507px; background-image: url(images/bg62.png); transition: all 1s;}
.txt6 { position: absolute; left: 90%; bottom: 20%; width: 447px; margin-left: 90px; opacity: 0; transition: all 1s;}
.txt6 p { margin-bottom: 17px; color: #5C7970;}
.bg71 { position: absolute; left: 50%; bottom: -201px; width: 699px; height: 201px; margin-left: -630px; background: url(images/bg71.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg72 { position: absolute; left: 50%; bottom: -206px; width: 182px; height: 206px; margin-left: -170px; background: url(images/bg72.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg73 { position: absolute; left: 50%; bottom: 170px; width: 651px; height: 231px; margin-left: -530px; background: url(images/bg73.png) 50% 0 no-repeat;}
.bg74 { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;}
.bg74 img { position: absolute; left: 0; bottom: 0; width: 100%; height: 251px;}
.txt7 { position: absolute; left: 50%; bottom: -150px; width: 420px; margin-left: 100px; opacity: 0; transition: all 1s;}
.txt7 p { margin-bottom: 17px; color: #EAEFF2;}
.bg81 { position: absolute; width: 100%; bottom: 100px; height: 215px; background: url(images/bg81.png) 50% 0 no-repeat;}
.bg82 { position: absolute; left: 50%; bottom: 160px
一个纯前端的官网的展示，使用jquery，css,js做的
版权申诉
155 浏览量
2023-04-14
16:00:32
上传
评论
收藏 1.19MB RAR 举报
一个的会动的网站.rar （61个子文件） 
一个的会动的网站 js 
jquery-ui.min.js 255KB jquery.fullPage.min.js 16KB jquery.min.js 110KB css jquery.fullPage.css 3KB
index.html 23KB dowebok.com.url 49B images 
bg74.png 116KB
section5.jpg 19KB t7.png 3KB bg93.png 20KB bg52.png 3KB dot.png 2KB bg82.png 6KB t2.png 3KB bg91.png 22KB bg102.png 4KB yixin.png 1KB section6.jpg 20KB bg61.png 20KB logo.png 3KB section8.jpg 27KB t4.png 3KB bg43.png 55KB bg73.png 34KB t3.png 3KB bg41.png 37KB section9.jpg 27KB bg101.png 22KB bg54.png 2KB slogan.png 7KB bg32.png 19KB t5.png 3KB bg51.png 3KB bg12.png 21KB bg92.png 19KB t9.png 7KB bg31.png 62KB bg11.png 18KB section1.jpg 40KB bg21.png 9KB bg83.png 2KB bg53.png 3KB section7.jpg 26KB t8.png 3KB t6.png 3KB btn.png 3KB bg71.png 8KB bg62.png 17KB bg72.png 4KB bg42.png 62KB section2.jpg 31KB bg13.png 117KB bg33.png 26KB section3.jpg 37KB bg23.png 37KB section10.jpg 63KB bg84.png 2KB bg103.png 3KB bg81.png 61KB bg22.png 13KB section4.jpg 26KB资源评论
arguments_zd
- 粉丝: 1w+
- 资源: 38
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
最新资源
- 使用Dockerfile配置Springboot应用服务发布Docker镜像-源码
- 万维考试系统-C语言题库-含题目-程序设计题导出-113道.doc
- Alibaba SpringCloud集成Nacos、openFeign实现负载均衡-源码
- 用户研究系列之Persona介绍（用户画像）
- Image_1715110604427.jpg
- mYzh..trashed-1716951334-.jpg
- Alibaba SpringCloud集成nacos实现配置中心
- 那些好的不像话的心流体验
- 基于pytorch的卷积神经网络识别是否为奥特曼的项目python源码+文档说明+数据集(课程设计)
- 基于卷积神经网络的图像风格迁移python源码+文档说明+界面图片(课程设计)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
