動畫

来源:https://www.cnblogs.com/cherry0420/archive/2023/05/25/17430497.html
-Advertisement-
Play Games

1. 動畫 動畫(animation)是CSS3中具有顛覆性的特征之一,可以通過設置都各節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過度,動畫可以實現更多變化,更多控制,連續自動播放等效果。 1.1 動畫的基本使用 製作動畫分為兩步: (1)先定義動畫。 (2)再使用(調用)動畫 ...


1. 動畫

動畫(animation)是CSS3中具有顛覆性的特征之一,可以通過設置都各節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。

相比較過度,動畫可以實現更多變化,更多控制,連續自動播放等效果。

1.1 動畫的基本使用

製作動畫分為兩步:

(1)先定義動畫。

(2)再使用(調用)動畫。

1.1.1 用Keyframes定義動畫(類似定義類選擇器)

@keyframes 動畫名稱 {

       0% {

                  width: 100px;

       }

       100% {

                 width: 200px;

       }

}

動畫序列

(1)0%是動畫的開始,100%是動畫的完成。這樣的規則就是動畫序列。

(2)在@keyframes中規定某項CSS樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果。

(3)動畫是使元素從一種樣式逐漸變化為另一種樣式的效果,可以改變任意多的樣式任意多的次數

(4)用百分比來規定變化發生的時間,或用關鍵詞“from”和“to”,等同於0%100%

1.1.2 元素使用動畫

div {

       width: 200px;

       height: 200px;

  background-color: aqua;

  margin: 100px auto;

  /*調用動畫*/

  animation-name: 動畫名詞;

  /*持續時間*/

  animation-duration: 持續時間;

}

屬性

描述

@keyframes

規定動畫。

animation

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

animation-name

規定@keyframes動畫的名稱。(必須的)

animation-duration

規定動畫完成一個周期所花費的秒或毫秒,預設是0。(必須的)

animation-timing-function

規定動畫的速度曲線,預設是“ease”。

animation-delay

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

animation-iteration重覆的-count次數

規定動畫被播放的次數,預設是1,還有infinite無限。

animation-direction

規定動畫是否在下一周期逆向播放,預設是“normal”,alternate逆播放。

animation-play-state

規定動畫是否正在運行或暫停。預設是“running”,還有“pause”。

animation-fill-mode

規定動畫結束後狀態,保持forwards,回到起始backwards。

1.1.3 動畫簡寫屬性

animation:動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態;

animation: myfirst 5s linear 2s infinite alternate;

註意:

(1)簡寫屬性裡面不包括animation-play-state。

(2)暫停動畫:animation-play-state: puased;經常和滑鼠進過等其他配合使用。

(3)想要動畫走起來,而不是直接跳回來:animation-direction: alternate;

(4)盒子動畫結束後,停在結束位置:animation-fill-mode: forwards;

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 其實互聯網上關於謎語和燈謎的資料仍然是挺多的,但是要想數據量以萬來計算並且是接近10萬的量來看的話,就只能是《近8萬條謎語燈謎大全ACCESS資料庫》了。而且《近8萬條謎語燈謎大全ACCESS資料庫》的數據表欄位中也包含分類欄位,可以根據分類欄位有針對性的給出謎語。 分類情況包含:字謎、成語、人名、 ...
  • 雖然已經有《7千多兒童故事網ACCESS\EXCEL資料庫》這種記錄數的童話故事類數據,但是遇到了好採集的就總想採集下來,後續有時間或有需求可以再做合併等操作。 分類情況統計為: 兒童故事:兒童小故事(1895)、睡前故事(1229)、益智故事(233)、哲理故事(177)。民間故事:世界上下五千年 ...
  • 原本我以為《3萬5千英語句子英語例句大全ACCESS資料庫》例句已經夠多了,沒想到今天遇到一個10萬條英語單詞例句的數據,非常適合與單詞詞典進行關聯學習,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的 ...
  • CSS中,*的作用是通配表示“全部”。遺憾的是,並沒有一種通配元素名的方法。 例如,我有好幾個東西class都標記為了my-element-序號,就像這樣: ```html ... ``` 我現在希望讓所有這些class的東西都應用同一個css規則。可惜,css並不支持這麼一種寫法: ```css ...
  • 近日在編寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。 經過查詢,找到一個被廣泛使用的解決方案是towxml 現記錄如下: > 首先將代碼克隆下來 ```js git clone htt ...
  • > 效果預覽 ![調節頁面.gif](https://wansherry.com/api/fc01e2c58219126e20367e856ebad24c.gif) > 關鍵代碼 ```javascript //調節視窗大小 useEffect(() => { if (conref.current) ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 在業務中,有這麼一種場景,表格下的某一列 ID 值,文本超長了,正常而言會是這樣: 通常,這種情況都需要超長省略溢出打點,那麼,就會變成這樣: 但是,這種展示有個缺點,3 個 ID 看上去就完全一致了,因此,PM 希望能夠實現頭部省略打點 ...
  • 隨著項目的發展,前端SPA應用的規模不斷加大、業務代碼耦合、編譯慢,導致日常的維護難度日益增加。同時前端技術的發展迅猛,導致功能擴展吃力,重構成本高,穩定性低。因此前端微服務應運而生。 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...