請用chrome或safari**(只支援webkit瀏覽器)
知識點:
1 perspective 屬性:
定義 3d 元素距檢視的距離,以畫素計。
該屬性允許改變 3d 元素檢視 3d 元素的檢視。
當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。
當perspective:none/0;時,相當於沒有設perspective(length)。
比如要建立乙個小立方體,長寬高都是200px。如果perspective < 200px ,那就相當於站在盒子裡面看的結果,如果perspective 非常大那就是站在非常遠的地方看(立方體已經成了小正方形了)。
當元素沒有設定perspective(length)時,所有後代元素被壓縮在同乙個二維平面上,不存在景深的效果。如果設定perspective(length)後,將會看到三維的效果。
預設的透視視角中心在容器(是perspective所在的元素,不是他的後代元素)的中點,也就是perspective-origin: 50% 50%。
當然你也可以自己設定,比如:左上角-webkit-perspective-origin: 0px 0px;。目前瀏覽器都不支援 perspective 屬性。
chrome 和 safari 支援替代的 -webkit-perspective 屬性。
2 走馬燈原理:設定乙個3d介面,再繪製走馬燈的6個面,最後讓這6個面繞著3d介面的中心軸旋轉
3 transform-style 屬性:規定如何在 3d 空間中呈現被巢狀的元素
transform-style:flat;元素不保留3d位置
transform-style:preserve-3d;元素保留其3d位置
4 keyframes屬性:
@keyfrmes 動畫名to{}
}類似flash關鍵幀,樣式從from{}到to{},也可以設定從0%{}到100%{}
呼叫動畫animation-name:動畫名;
動畫時長animation-duration:10s;
動畫開始前和結束後的屬性設定animation-fill-mode:none | forwards | backwards | both;
5 transform屬性
transform:translatez(100px);在z軸進行位移
transform:rotatey(100deg);繞y軸旋轉100度
**:
注:位移和角度的數值計算還沒理清,只通過效果進行了大致調整
123456
css3 走馬燈效果
純css3實現了乙個正六邊形的走馬燈效果,記錄一下css3動畫的學習情況,效果如下 主要用到的css3技術有 keyframes perspective perspective origin transform translate rotate animation transform origin,...
STM32學習筆記(一) 跑馬燈
本實驗所採用的開發板為正點原子的ministm32f103rc開發板,主函式程式如下,注釋如下 main.c include stm32f10x.h void delay u32 count int main void 如果使用正點原子廠家所提供的system檔案下的delay.h的標頭檔案,可以更...
css學習筆記 3
標籤按照規定預設方式排列 多個塊級元素同行顯示 選擇器 div 向一邊移動直到左邊緣或右邊緣觸及包含塊或另乙個浮動框 浮動會脫離標準流 多盒子設定浮動,按屬性值一行內顯示並且頂端對齊排列 浮動元素會有行內塊特性 浮動的盒子只影響後面的標準流 最初產生是為了做文字環繞效果 div乙個盒子在盒子內隨意定...