CSS3幻燈片製作心得

2022-02-25 09:32:15 字數 1990 閱讀 2067

大神勿噴,這是小弟自己學習的痕跡。

css3動畫效果核心**

1

@keyframes slideleft

5100% 8}

9@keyframes slidebottom

13100% 16}

17@keyframes zoomin

21100% 24}

25@keyframes rotate

29100%

32}

技術名詞1.height:auto 與 height: 100%

height:auto,是指根據塊內內容自動調節高度。

height:100%,是指其相對父塊高度而定義的高度,也就是按照離它最近且有定義高度的父層的高度來定義高度。

2. z-index (參考自 

z-index是針對網頁顯示中的乙個特殊屬性。

因為顯示器是顯示的圖案是乙個二維平面,擁有x軸和y軸來表示位置屬性。

為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。

z-index值 較大 的元素將疊加在z-index值 較小 的元素之上。

對於未指定此屬性的定位物件,z-index 值為正數的物件會在其之上,而 z-index 值為負數的物件在其之下。

★ 只對定位元素有效

z-index屬性適用於定位元素(position屬性值為 relative 或 absolute 或 fixed的物件),

用來確定定位元素在垂直於顯示屏方向(稱為z軸)上的層疊順序,也就是說如果元素是沒有定位的,對其設定的z-index會是無效的。

3.偽元素 ::after 和 ::before

::after是乙個css偽元素,使用::after,你可以從css裡往頁面上新增內容(不再要在html裡有相應的東西)。

雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示

::before跟::after完全類似,只是它插入的內容會出現在其它內容之前。

這兩者的區別可以簡單描述為:

想讓插入的內容出現在其它內容前,使用::before,否者,使用::after。

在**順序上,::after生成的內容也比::before生成的內容靠後。如果按堆疊視角,::after生成的內容會在::before生成的內容之上。

content的值可以為:

字串: content: "字串"; – 特殊字串需要轉義或unicode編碼。

:content: url(/path/to/image.jpg); – 會按原尺寸大小的插入,不能改變,因為漸變色實際上也是影象,所以,這些偽元素裡也可以使用漸變色。

空: content: ""; – 可以用於清除左右浮動元素,也能夠用於使用背景(這是可以設定高和寬,甚至使用background-size。)

計數器: content: counter(li); – 在列表時計算行數非常方便。

需要注意的是,你不能用它們插入html(至少這些html**會被轉義輸出)。content: "";

4.background-size: length | percentage | cover | contain;

一:length

該屬性值是設定背景影象的寬度和高度的,第乙個值是寬度,第二個值是設定高度的。如果只設定第乙個值,那麼第二個值會自動轉換為 「auto」;

二:percentage

該屬性是以父元素的百分比來設定的寬度和高度的,第乙個值是寬度,第二個值是高度。如果只設定乙個值,那麼第二個值會被設定為 「auto」;

把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。

四:contain

把影象擴充套件至最大尺寸,以使寬度和高度 完全適應內容區域。

實際靜態效果圖如下(引自空中網)

函式式程式設計(3) 幻燈片

說明 1.本演示稿對函式式程式設計僅能起到 概念解釋 級別上的作用,可能連 入門 都算不上。如需學習函式式程式設計,可以選擇一門函式式程式語言進行全面學習 2.鑑於我們很少 幾乎沒有 接觸函式式程式設計,本演示稿中的 統一使用c 模仿 3.作者學習過f 但對其他函式式程式語言無了解。4.了解一種新的...

幻燈片製作之不同字型的使用

很久沒寫這個系列的文章了,最近一直在做pdf,對中文和英文排版時的字型進行了一些研究。字型的使用同樣可以應用於幻燈片的製作中,一款合適的字型能夠給你的幻燈片增色不少。中文部分 office2003的預設字型是宋體,所以我們常見的中文幻燈片中,大部分都是採用的宋體,但是宋體並不是最好的顯示字型,推薦使...

幻燈片製作是否需要使用漂亮的模板

幻燈片製作是否需要使用漂亮的模板 本文節選自 美哉!powerpoint 完美幻燈演示之路 itpub個人空間 jlf d1w 一書 在實際的演示文稿製作中,經常會收到這樣的要求 做得漂亮一些 但並非所有參與powerpoint文稿的製作者都是專業設計出身,為了這個 漂亮 開始大量蒐集散布於網路的各...