一猫缭、滾滾屏
滾滾屏網(wǎng)站是時下非常流行行的個人站或者企業(yè)站的制作風格屈梁,這個本身就是一種流行行的趨勢佳镜,這個類型的網(wǎng)站大量量運用css3中的動畫模塊技術(shù)霜第,并且需要配合使用jquery。
特點:
- 每一屏都是鋪滿的 寬度和高度都是100%技羔;
- 沒有滾動條僵闯;
- 滾動效果需要第三方庫的支持;
- 每一屏的元素都是定位實現(xiàn)的藤滥;一般都是居中定位鳖粟,這個很重要;
- 所有的入場動畫和出場動畫都是依靠CSS3 實現(xiàn)的;
二拙绊、案例知識點
1.jQuery Mousewheel Plugin
用于添加跨瀏覽器?的鼠標滾輪支持;
mousewheel事件的處理理函數(shù)有一點小小的變化向图,它除了了第一個參數(shù)event 外,還接收到第二個參數(shù)delta;通過參數(shù)delta可以獲取鼠標滾輪的方向和速度;
如果delta的值是負的即-1标沪,那么滾輪就是向下滾動榄攀,正的1就是向上。
2.animation: scroll 1s infinite alternate
infinite 規(guī)定動畫應該無限次播放
alternate 動畫應該輪流反向播放
linear-gradient
線性漸變 默認 從上到下
3.語法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
transform
在用CSS3做動畫的時候金句,盡量量把各種動畫屬性寫完整檩赢,以適應各種瀏覽器?的兼容問題
例例如:
0%{
transform:translateX(0px) translateY(10px)
translateZ(0px) rotateX(0deg) rotateY(0deg)
rotateZ(0deg) scaleX(1) scaleY(1)scaleZ(1);
}
100%{
transform:translateX(0px) translateY(0px)
translateZ(0px) rotateX(0deg) rotateY(0deg)
rotateZ(0deg) scaleX(1) scaleY(1)scaleZ(1);
}
perspective
定義 3D 元素距視圖的距離,以像素計违寞;
當為元素定義 perspective 屬性時贞瞒,其子元素會獲得透視效果,而不不是元素本身趁曼;
perspective 屬性只影響 3D 轉(zhuǎn)換元素军浆。
效果是:近大遠小
語法:
perspective: number|none;
backface-visibility
定義當元素不不面向屏幕時是否可見;
如果在旋轉(zhuǎn)元素不不希望看到其背面時,該屬性很有用挡闰。
在3D效果小才能顯現(xiàn)
backface-visibility: visible|hidden;
transform-style
屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素
該屬性必須與 transform 屬性一同使用
語法:
transform-style: flat|preserve-3d;