欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

整體實現(xiàn)思路介紹

整個案例使用到CSS3 和 HTML技術(shù)， 案例的核心知識點 使用到了 CSS3 中的透視 、3D變換、 動畫 、無縫滾動等技術(shù)要點， 下面我會逐一進行介紹

• 知識點1: 一鏡到底特效的 案例的整體布局、設(shè)計、及動畫思路

• 知識點2：CSS3中的3D坐標系

• 知識點3：CSS3中的3D變換及案例應(yīng)用

• 知識點4：CSS3中的3D透視及案例應(yīng)用

• 知識點5：CSS3中的 透視及3d變換的異同點

• 知識點6：CSS3中的 動畫及案例應(yīng)用

1、一鏡到底特效 的整體布局、設(shè)計、及動畫思路

如下圖所示，一鏡到底的案例特效 最核心的就是要 構(gòu)成一套 在3D 空間中， 有多個平行的場景， 然后以攝像機的視角  從前往后 移動，在場景中穿梭， 依次穿過每一個場景的頁面即可，自己閉上眼睛來體會一下吧。

對應(yīng)到本案例中效果就是這樣啦：

當然有朋友會說看上圖，感覺不到明顯的3D 立體效果， 那再來看看下面這個圖吧；

上面這張圖就是 基于人眼 看不同距離的物體呈現(xiàn)出的結(jié)果， 也就是透視效果， 透視效果最核心的特點就是近大遠小；而影響看到透視物體大小的一個參數(shù)就是消失點距離， 比如消失點越近，最遠處的物體會越小， 近大遠小的效果越明顯， 自己閉上眼睛來體會一下吧。

對應(yīng)到本案例中效果就是這樣啦：

注意：本案例中 的主要功能是動效， 所以在頁面框架布局上，大多使用的都是定位布局， 布局中的基礎(chǔ)概念 ‘子絕父相’ 就不用我多說了吧

上述框架對應(yīng)的HTML源碼如下, 其中.sence-in 內(nèi)部的子元素是素材，可以先忽略：

知識點一： CSS3中的坐標系

CSS3中的坐標系，是一切3D 效果的基石， 務(wù)必熟練掌握 ， 如下圖所示：

• x軸坐標：左邊負，右邊正

• y軸坐標：上邊負，下邊正

• z軸坐標：里面負，外面正

• 注意： 坐標系的原點在 瀏覽器的左上角

知識點二： 透視(perspective)

perspective屬性定義了觀察者和Z=0平面之間的距離，從而為3D轉(zhuǎn)換元素創(chuàng)建透視效果。上面也說了， 透視的效果就是 近大遠小， 上面的截圖中也能看到 。這個屬性是用來創(chuàng)建3D轉(zhuǎn)換效果的必要屬性，因為當我們進行旋轉(zhuǎn)或其他3D轉(zhuǎn)換時，如果透視效果設(shè)置得不正確，元素可能會顯得很奇怪或不正常。 透視的語法如下：

在CSS中，我們可以通過在父元素上設(shè)置perspective屬性來控制子元素的3D效果。例如：

.container {  

  perspective: 1000px;  

}

在這個例子中，我們?yōu)?code>.container元素設(shè)置了perspective屬性，值為1000px。這意味著任何在這個元素內(nèi)部的3D轉(zhuǎn)換都會基于這個視距進行透視。

知識點三：3D 變換的核心屬性： transform-style

transform-style屬性決定了是否保留元素的三維空間布局。當設(shè)置為preserve-3d時，它會保留元素內(nèi)部的三維空間，即使這個元素本身沒有進行任何3D轉(zhuǎn)換。這使得子元素可以相對于父元素進行旋轉(zhuǎn)或其他3D轉(zhuǎn)換，而不會影響其他元素。在我們的案例截圖中 也能看出在父元素設(shè)置了 transform-style: preserve-3d;屬性后， 各個場景在 Z軸方向上，已經(jīng)有了前后距離上的差異了。  需要注意的點就是， transform-style屬性一定要設(shè)置給發(fā)生3D變換元素的父元素

例如：

 /* 透視屬性加給了 最外層的元素， 保證所有子元素的透視效果是一致的，協(xié)調(diào)的*/

.perspective-box {  

  transform-style: preserve-3d;  

}

在這個例子中，我們?yōu)?code>.perspective-box元素設(shè)置了transform-style屬性為preserve-3d，這意味著任何在這個元素內(nèi)部的3D轉(zhuǎn)換都會保留其三維空間布局。

• 小技巧：如果你希望自己做的3D場景，立體效果很真實的話， 可以盡量多的給不同的元素，設(shè)置在Z軸方向上 設(shè)置不同的偏移量， 這樣的效果是 攝像機在穿梭的過程中，每一段距離都能看到不同的風(fēng)景， 層次感會很強， 當然也不要太瘋狂， 不然場景會變得混亂哦

知識點四、perspective和transform-style的差異和注意點(炒雞重要！)

• perspective屬性定義了觀察者和Z=0平面之間的距離，通俗的說 就是屏幕 到消失點的距離，從而影響3D元素的透視效果, 而transform-style屬性決定了是否保留元素的三維空間布局

• 當我們只使用perspective屬性時，只有被明確設(shè)置為3D轉(zhuǎn)換的元素才會顯示透視效果。而當我們使用transform-style: preserve-3d時，即使元素本身沒有進行任何3D轉(zhuǎn)換，其子元素也可以進行3D轉(zhuǎn)換并保留三維空間布局。

注意：perspective屬性，只能帶來近大遠小的透視視覺效果，并不能構(gòu)成真正的3D空間布局。真正的3D布局必須依賴于transform-style: preserve-3d屬性來實現(xiàn)

知識點五、animation動畫的定義和使用

CSS動畫是一種使元素從一種樣式逐漸改變?yōu)榱硪环N樣式的方法。這個過程是通過關(guān)鍵幀（keyframes）來定義的，關(guān)鍵幀定義了動畫過程中的不同狀態(tài)。 在一鏡到底的案例中， 整個場景的前后移動，用的就是動畫屬性。

動畫的使用分為兩步， 具體使用方式如下：

• 1.使用@keyframes 來定義動畫

• 2.使用animation屬性來調(diào)用動畫，

@keyframes rotate {  

  from { transform: rotateX(0deg); }  

  to { transform: rotateX(360deg); }  

}

在這個例子中，我們定義了一個名為“rotate”的關(guān)鍵幀動畫，使元素從X軸的0度旋轉(zhuǎn)到360度。然后，我們可以通過將這個動畫應(yīng)用到HTML元素上來使用它：

.perspective-content {  

  animation: rotate 5s infinite linear;  

}

在這個例子中，我們將“rotate”動畫應(yīng)用到.cube元素上，設(shè)置動畫時間為5秒，無限循環(huán)，并且線性過渡;

在一鏡到底的案例中， 我們定義的動畫如下：

上午動畫 其實做了一個無線循環(huán)輪播的邏輯， 就是當 在Z軸方向上 從 0 移動到 6000距離以后， 在重置到-6000px, 這樣就可以在從-6000繼續(xù)向前移動， 移動到 0 ，達到一個循環(huán)， 再開始下一次的循環(huán)；

• 小技巧： 你可以把動畫 單獨加給每個場景（可能有10多個子元素， 你的重復(fù)寫10多遍，會很麻煩的），也可以把動畫加給公共的父元素，父元素會帶著里面的子元素一起動， 這樣只用寫一次就行哦。

作者：IT大春哥
鏈接：https://juejin.cn/post/7325739662033879090
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。