fullpage.css
5.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*!
* fullPage 3.0.0
* https://github.com/alvarotrigo/fullPage.js
*
* @license GPLv3 for open source use only
* or Fullpage Commercial License for commercial use
* http://alvarotrigo.com/fullPage/pricing/
*
* Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
*/
html.fp-enabled,.fp-enabled body{ margin: 0;padding: 0;overflow:hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.fp-section{ position: relative;-webkit-box-sizing: border-box;/* Safari<=5 Android<=3*/-moz-box-sizing: border-box;/* <=28*/box-sizing: border-box;}
.fp-slide{ float: left;}
.fp-slide, .fp-slidesContainer{ height: 100%;display: block;}
.fp-slides{ z-index:1;height: 100%;overflow: hidden;position: relative;-webkit-transition: all 0.3s ease-out;/* Safari<=6 Android<=4.3*/transition: all 0.3s ease-out;}
.fp-section.fp-table, .fp-slide.fp-table{ display: table;table-layout:fixed;width: 100%;}
.fp-tableCell{ display: table-cell;vertical-align: middle;width: 100%;height: 100%;}
.fp-slidesContainer{ float: left;position: relative;}
.fp-controlArrow{ -webkit-user-select: none;/* webkit (safari, chrome) browsers*/-moz-user-select: none;/* mozilla browsers*/-khtml-user-select: none;/* webkit (konqueror) browsers*/-ms-user-select: none;/* IE10+*/position: absolute;z-index: 4;top: 50%;cursor: pointer;width: 0;height: 0;border-style: solid;margin-top: -38px;-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.fp-scrollable{ overflow: hidden;position: relative;}
.fp-scroller{ overflow: hidden;}
.iScrollIndicator{ border: 0 !important;}
.fp-notransition{ -webkit-transition: none !important;transition: none !important;}
/*主屏滚动导航圆点*/
#fp-nav{ position: fixed;z-index: 1000;margin-top: -32px;top: 50%;opacity: 1;-webkit-transform: translate3d(0,0,0);}
#fp-nav.fp-right{ right: 17px;}
#fp-nav.fp-left{ left:30px;}
#fp-nav ul{ margin: 0;padding: 0;}
#fp-nav ul li{ display: block;width: 11px;height:30px; position:relative;}
#fp-nav ul li a{ display: block; position: relative;z-index: 1;width: 100%; height: 100%;cursor: pointer;text-decoration: none;}
#fp-nav ul li a span{ position: absolute; left:0; top:0; z-index: 1; width:11px; height:11px; border: 0; background: #fff; margin:10px 0 0 0;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span{ width:11px; height:30px;margin:0 0 0 0;}
#fp-nav ul li:hover a span{ width: 11px; margin:10px 0 0 0;}
#fp-nav ul li .fp-tooltip{ position: absolute;top: -2px;color: #fff;font-size: 14px;font-family: arial, helvetica, sans-serif;white-space: nowrap;max-width: 220px;overflow: hidden;display: block;opacity: 0;width: 0;cursor: pointer;}
#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip{ -webkit-transition: opacity 0.2s ease-in;transition: opacity 0.2s ease-in;width: auto;opacity: 1;}
#fp-nav ul li .fp-tooltip.fp-right{right: 20px;}
#fp-nav ul li .fp-tooltip.fp-left{left: 20px;}
/*f12横向滚动导航圆点*/
.fp-controlArrow.fp-prev{ left: 150px;width: 0; border-width:20px 20px 20px 0; border-color: transparent #aaaaaa transparent transparent; display:none;}
.fp-controlArrow.fp-next{ right: 150px; border-width:20px 0 20px 20px; border-color: transparent transparent transparent #aaaaaa; display:none;}
.fp-slidesNav{ width:100%; position: absolute; z-index: 4;opacity: 1;-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0); /* left:50% !important; margin-left:-21px; */}
.fp-slidesNav.fp-bottom{ bottom:25%;}
.fp-slidesNav.fp-top{ top: 17px;}
.fp-slidesNav ul{ text-align:center; margin: 0 auto; padding: 0; -webkit-box-sizing: border-box; box-sizing:border-box; display:-webkit-box; display:-webkit-flex; display:flex; display:block; white-space:nowrap;}
.fp-slidesNav ul:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.fp-slidesNav ul li{ width:2.5rem;height:2.5rem; /* float:left; */ margin:0 5px 0 5px; display:inline-block;}
.fp-slidesNav ul li a{ display: block; position: relative;z-index: 1;width: 100%; height: 100%;cursor: pointer;text-decoration: none;}
.fp-slidesNav ul li a span{ position: absolute; left:0; top:0; z-index: 1; width:2.5rem; height:2.5rem; border: 0; background: #aaaaaa;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
.fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span{ width:2.5rem; height:2.5rem; background:#d91827;}
.fp-slidesNav ul li:hover a span{ width: 1.5rem; height:1.5rem;}
.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{ height: auto !important;}
.fp-responsive .fp-auto-height-responsive.fp-section, .fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell { height: auto !important;}