利用CSS3動畫實現圓圈由小變大向外擴散的效果例項

2022-09-26 19:54:14 字數 916 閱讀 9896

前言

css3中新增了乙個animation的屬性,該屬性類似於建立乙個animation物件

如:animation: bounce 2.0s infinite ease-in-out;

animation有以下幾個引數:

屬性描述

cssanimation

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

3animation-name

規定 @keyframes 動畫的名稱。

3animation-程式設計客棧duration

規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。

3animation-timing-function

規定動畫的速度曲線。預設是 "ease"。

3animation-delay

規定動畫何時開始。預設是 0。

3animation-iteration-count

規定動畫被**的次數。預設是 1。

3animation-direction

規定動畫是否在下一週期逆向地**。預設是 "normal"。

3animation-play-state

規定動畫是否正在執行或暫停。預設是 "running"。

3animation-fill-mode

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

3css 3 中2d轉換的實現用到兩個屬性:

屬性描述

csstransform

向元素應用 2d 或 3d 轉換。

3transform-origin

指定變換的基點的位置。

3靜態效果圖:

具體如**所示:

無標題文件

總結本文標題: 利用css3動畫實現圓圈由小變大向外擴散的效果例項

本文位址:

純CSS3實現圓圈動態發光特效動畫

效果圖 這個效果的具體實現主要是用到了css3 的animation 它共有8個屬性 animation name 規定 keyframes 動畫的名稱。用來定義乙個動畫的名稱。如果要設定幾個animation給乙個元素,我們只需要以列表的形式,用逗號 隔開 animation duration 動...

css3的動畫實現

關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時,動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...

css3實現動畫效果

transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...