項目可以用<section>標(biāo)簽對不同部分進行劃分；
對css進行初始化：cssreset.css
-
頁面占滿整個屏幕且不出現(xiàn)滾動條
html,body{ width: 100%; height: 100%; overflow: hidden; } -
依賴滾滾屏插件實現(xiàn)鼠標(biāo)滾動做出相應(yīng)：jquery.mousewheel.min.js
github: https://github.com/jquery/jquery-mousewheel
使用滾滾屏?xí)r，使用timeout進行節(jié)流 , 讓最后一次滾動有效 ; 在pc端節(jié)流一般控制在500毫秒。
-
用法：
在監(jiān)聽屏幕滾動的時候，先清除定時器，再設(shè)置500毫秒的定時器； 滾動事件寫在回調(diào)函數(shù)中
通過監(jiān)聽其上下滾動實現(xiàn)界面的界面
對不同界面的公共樣式進行搭建，然后使用js對特別的樣式進行劃分
在界面樣式搭建時，建議使用彈性布局。
-
css3動畫
animation: myAnimate 1s infinite alternate linearmyAnimate 自定義動畫 1s 動畫所花費的時間 infinite 規(guī)定動畫應(yīng)該無限次播放 alternate 動畫應(yīng)該輪流反向播放 linear 動畫的曲線（勻速） /*滾動的指示器*/ .scroll{ .... /*ccs3動畫*/ animation: unAndDowm 0.65s infinite alternate; } /*實現(xiàn)自定義動畫*/ @keyframes unAndDowm { 0%{transform:translateY(0px)} 100%{transform:translateY(10px)} } css3漸變色介紹
linear-gradient
線性漸變的方向 默認(rèn)從上到下
-
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);direction ：漸變開始的角度, 默認(rèn)是180deg color-stop1 ： 漸變的過渡的顏色 （ 可以寫多個，還可以在其后添加百分比 ）
-
background 簡寫屬性在一個聲明中設(shè)置所有的背景屬性。
可以設(shè)置如下屬性：(用逗號隔開)- background-color - background-position : center -60px - background-size - background-repeat - background-origin - background-clip - background-attachment - background-image -
絕對定位時，使其居中顯示的做法：
width:200px; height:200px; left:50%; top:50%; margin-left:-100px; margin-top:-100px; 微調(diào)技巧
-
聲明當(dāng)前文件的編碼格式
/*聲明當(dāng)前文件的編碼格式*/ @charset "UTF-8"; -
設(shè)計聯(lián)調(diào)
在瀏覽器的F12后，在source界面，右擊鼠標(biāo)，彈出創(chuàng)建文件夾到工作空間； 選中項目中的css文件夾, 點擊確認(rèn)后會彈出一個是否允許的權(quán)限提示，點擊允許； 選中要關(guān)聯(lián)的文件，查看你編碼是否正確。 右鍵選擇map將其映射到網(wǎng)絡(luò)中。按回車鍵即可。 映射成功后，只要在瀏覽器上調(diào)試的都會相應(yīng)的修改在編輯器中。
- 透視介紹
近大遠(yuǎn)小 ： http://www.w3school.com.cn/cssref/pr_perspective.asp
一旦在父標(biāo)簽設(shè)計透視，子標(biāo)簽就會有透視效果
-
設(shè)置
perspective：80px; -webkit-perspective:80px;
-
使用css3動畫時的初始化模板
transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
- 注意：平移的單位是px,旋轉(zhuǎn)的單位是deg,放大的默認(rèn)值是1
- 面向和背向效果
效果：圖片面向前，可見； 背向，不可見
-
backface-visibility : visible | hidden;
- 設(shè)計標(biāo)簽背向時是否可見 ; - 如果在旋轉(zhuǎn)元素不希望看到其背面時，該屬性很有用。 - **父標(biāo)簽在3D效果下能顯現(xiàn)** -
父標(biāo)簽添加3D效果： transform-style
- 屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素 - 該屬性必須與 transform 屬性一同使用- 語法：transform-style: flat|preserve-3d;
- 給界面添加落空效果：通過添加落空類current
-
界面一進來就默認(rèn)放大
section.p2.current .p2_main, section.p2.current .p2_title{ transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(4) scaleY(4) scaleZ(4); } -
記得加上動畫過渡效果：
.p2 .p2_main, .p2 .p2_title{ transition: all 1s linear; } -
使用一次性定時器50ms，使落空的效果更加明顯。
通過js刪除選中的界面的落空類，添加其他沒有選中的界面的落空類，
使得再次切換的時候該落空類依然存在。function toggleCurrent() { setTimeout(function () { $('section').eq(index).removeClass('current').siblings('section').addClass('current'); },50); } 點擊和滾動屏幕的時候都應(yīng)該有落空類
-
公轉(zhuǎn)和自轉(zhuǎn)
- 公轉(zhuǎn)的速度比自轉(zhuǎn)慢，且公轉(zhuǎn)是父親li在轉(zhuǎn)，自轉(zhuǎn)是兒子img本身在轉(zhuǎn)，都是圍繞z軸轉(zhuǎn)過360度。 - 添加動畫animation即可實現(xiàn) 要在Z層分層，就要在其父元素上設(shè)置3d效果；
background-size
background-size: length | percentage | cover | contain;
*length*
設(shè)置背景圖像的高度和寬度。
第一個值設(shè)置寬度，第二個值設(shè)置高度。
如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。
*percentage*
以父元素的百分比來設(shè)置背景圖像的寬度和高度。
第一個值設(shè)置寬度，第二個值設(shè)置高度。
如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。
cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain
把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
-
transform-origin 屬性(樣式的坐標(biāo)點)
transform-origin 屬性允許您改變被轉(zhuǎn)換元素的位置。 2D 轉(zhuǎn)換元素能夠改變元素 x 和 y 軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸。默認(rèn)值： 50% 50% 0
繼承性： no
版本： CSS3
JavaScript 語法： object.style.transformOrigin="20% 40%"
transform-origin: x-axis y-axis z-axis;
-
x-axis
定義視圖被置于 X 軸的何處?？赡艿闹担? left center right length % -
y-axis
定義視圖被置于 Y 軸的何處?？赡艿闹担? top center bottom length % -
z-axis
定義視圖被置于 Z 軸的何處?？赡艿闹担? length
- 從四面八方過來
給不同的元素添加translateX、Y屬性。
