前端基礎學習之css3 animation 動畫

2021-10-08 13:50:13 字數 2226 閱讀 8642

動畫是css3中具有顛覆性的特徵之一,可通過設定多個節點來精確控制乙個或一組動畫,常用來實現複雜的動畫效果。 屬性

描述@keyframes

規定動畫(類似函式的宣告)【0-100% / from(與 0% 相同)to(與 100% 相同)】

animation

所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。

animation-name

規定 @keyframes 動畫的名稱。(宣告與呼叫 類似函式名)

animation-duration

規定動畫完成乙個週期所花費的秒或毫秒。預設是 0(和過渡動畫類似)

animation-timing-function

規定動畫的速度曲線。預設是 「ease」。(和過渡動畫類似)

animation-delay

規定動畫何時開始。預設是 0。(和過渡動畫類似

animation-iteration-count

animation-direction

animation-play-state

規定動畫是否正在執行或暫停。預設是 「running」。(running或者paused)

animation-fill-mode

規定物件動畫時間之外的狀態。

demo1:簡單的心跳效果

/html>demo2:轉圈效果

web 前端<

/p>

<

/div>

<

/body>

<

/html>demo3:大海太陽

前端基礎之css

css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。selector 例如 2.1 行內式 行內式是在標記的style屬性中設定css樣式。這種方式沒有體現出css的優勢,不推薦使用。hello michael 2.2 嵌入式 嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下 ...

前端基礎之CSS

目錄css查詢標籤之基本選擇器 css查詢標籤之組合選擇器 屬性選擇器 分組與巢狀 d1,c1,span 注釋內容 eg 大標題 導航條樣式 登入框樣式 特點是方便檢視 最常用的方式 因將html和css柔和到一起,增加了耦合度,不推薦使用 直接通過標籤名查詢標籤 通過標籤的class屬性查詢標籤 ...

前端學習之css

1.html中的三種布局格式 a.標準流 網頁中預設的方式 b.浮動 c.定位 2.html的兩大元素 a.塊級元素 獨佔一行 div h1 h6 table p 有序無序列表 ol ul li 等等 b.內聯元素 和相鄰的內聯元素在同一行 a span image input 等等 文字1文字2 ...