CSS 動畫

CSS 演示文稿

來源:在線程序

有許多程序可以在其中編輯、創建蒙太奇甚至創建 動畫,每次都有很多軟件加入這種類型的交互項目。 在這篇文章中,我們不僅要向您介紹動畫世界,還要向您介紹一位新朋友。

眾所周知,計算世界充滿了用於開發目前共存的網頁或在線媒體的命令和有用工具。 留在我們身邊,在這個新教程中發現另一種提高計算和交互水平的方法。

什麼是動畫?

動畫的世界

來源:所有玩家

我們希望您完全進入教程,但為此,有必要進入動畫世界或平面設計方面的世界, 交互設計。 

動畫也是視聽世界的一部分,事實上,如果與否,它們將一無是處,因為在其中引入了音頻和運動圖像。 因此,當我們談到“動畫”時,我們指的是眾所周知的“卡通”。

如上所述,動畫源於賦予事物運動的能力,在這種情況下是卡通。 但是所有這些運動是如何實現的呢?毫無疑問,它們源於我們所說的, 圖畫或照片序列 通過一個接一個地連續排序,他們設法在我們眼前產生了一個可信的運動,這讓他們自己進入了視覺錯覺的遊戲。

以前,最初的動畫是在紙上設計的,每張紙中,動畫人物都是一步一步畫的,一旦到了紙的末端,就一個一個地快速通過,達到在紙上運動的效果。畫畫。

動畫類型

有不同類型的動畫:

卡通或傳統動畫

這種風格包括逐幀給主角移動。 一開始,視聽手段不夠,都是通過對每一幀畫面(包括動畫的背景、舞台或背景)的描畫來進行的,後來又被拍成我們所謂的膠卷。

停止運動

定格動畫是一種與卡通無關的動畫技術。 此外,它的主要目標是模擬現實中完全靜止的物體的運動,它分為兩個階段:粘土或粘土運動的動畫和剛性物體的動畫。

像素化

像素化是一種來自定格動畫的技術,包括處理既不是玩偶也不是模型的對象,而是普通對像或人。 物體被多次拍攝,每一幀都有輕微的變化。

旋轉鏡檢查

它包括直接繪製另一幅圖畫,例如在另一幅圖畫或真實人物上繪製一幅圖畫。 它被認為是動作捕捉的先驅,即用於在電影世界中重建數字角色的動作捕捉。

剪切動畫或剪切動畫

這是一種由切割圖形組成的技術,這些圖形可以在紙上或照片中表示。 角色的身體是基於剪切圖構建的,而運動和動畫則是通過替換所述剪切圖而產生的。

動畫3D

3D 動畫源自一個編輯器程序,它允許執行模擬和動畫。 在這兩種變體中,良好的照明、相機運動和特殊效果相互聯繫。

目前還有其他技術,例如: 玻璃上的繪畫、沙子的動畫、古賈斯的屏幕和賽璐珞上的繪畫。 

什麼是 CSS?

一個程序的css界面

來源:網頁設計 Rosario Session Studio

現在您對動畫世界有了更多的了解,現在是我們向您介紹 CSS 首字母縮略詞世界的時候了。

看台 的CSS,請參閱“級聯樣式表”。 它是由一種在設計領域和網頁呈現中使用的語言形成的,更好的是,它們是一系列工具和命令,負責呈現我們第一次看到的網頁它已經被創建。 與工具一起使用 HTML (從頁面的基本內容組織)。

它的名稱由它包含的工作表數量決定,其中之一從其他人那裡繼承了屬性或特徵。 也就是說,您可以使用一個簡單的博客模板,但是當您想要自定義站點的外觀時,您需要實施 CSS,它與良好的 CMS 一起將幫助您增強內容的覆蓋範圍。

CSS 有什麼用?

使用 CSS,您可以組織您的頁面,也就是說,您可以告訴您的網頁您希望如何定位所有信息,以便查看器易於處理並同時有用。 此處輸入作為網頁樣式或設計一部分的某些元素的所有命令,例如, 字體、顏色、大小等。 

通常,為了讓您更好地了解該工具的用途,數字營銷專家是第一個了解這一點的人,因為他們是處理這些工具的人。

在 CSS 中製作動畫

好吧,現在您對動畫和 CSS 的世界有了一些了解。 是時候開始教程了。

CSS 動畫允許您為一種 CSS 樣式和另一種 CSS 樣式之間的過渡設置動畫。 這些動畫由兩部分組成: 風格 它描述了 CSS 動畫和一組 鏡框 表示它的初始和最終狀態,以及其中可能的中間點。

這些動畫中的每一個都有一系列優點:

  • 對於簡單的動畫,它的使用非常容易,即使您不了解 Javascript 也可以做到。
  • 即使在低功耗計算機上,動畫也能正確顯示。
  • 由瀏覽器控制,它可以優化其性能和效率,從而降低頻率並以不可見的方式執行選項卡。

動畫設置

要開始動畫,首先我們必須配置它。 為此,我們將前往該物業 動畫 及其子屬性。 這個工具將允許我們配置動畫的節奏和持續時間,甚至不配置它的序列。

子屬性是:

動畫 - 延遲

從元素加載到動畫序列開始之間的延遲時間。

動畫 - 方向

指示動畫是否應該在序列結束時返回到開始幀,或者是否應該在到達結束時從頭開始。

動畫 - 持續時間

表示動畫完成其循環所需的時間(持續時間)

動畫 - 迭代 - 計數

重複的次數。 我們可以指出 無限 無限期地重複動畫。

動畫 - 名稱

它用於指定描述每個動畫幀的名稱。

動畫 - 播放 - 狀態

允許您能夠暫停和恢復動畫序列。

動畫-計時-功能

它指示動畫的節奏,即動畫幀的顯示方式,為此建立了加速度曲線。

動畫 - 填充 - 模式

指定動畫結束後屬性會有什麼值。

用幀設置序列

一旦我們配置了時間、命名法等。 是時候為我們的動畫提供外觀或感覺了。

為此,我們將建立兩個新框架並使用規則 @關鍵幀. 有了這個,每一幀都描述了在動畫序列中如何找到每個元素。

表明 時間和節奏, 框架使用 百分比 從和到多虧了這一點,我們可以指示何時開始以 0% 發生,何時以 100% 結束。

幀和文本動畫

要添加更多幀並使用文本為其設置動畫,您需要應用更大尺寸的標題字體,以便標題在移動一段時間後增加,然後再減小到其原始大小。 為此,我們將建立以下代碼:

75% 字體 - 大小:300%; 邊距 - 左:25%; 寬度:150%;

使用此代碼,我們建議瀏覽器在 75% 的序列中,標題的左邊距為 25%,大小為 200%,寬度為 150%。

動畫重複

要使動畫重複,您需要使用以下屬性 動畫 - 迭代 - 計數 並且我們必須指明我們希望它重複多少次。 我們也可以使用 無限 以便它總是重複。

結論

如您所見,在 CSS 中您可以創建動畫項目,您可以按照我們提供的步驟輸入它。 如果您繼續詢問並告知自己,您會發現我們有很多選擇。

你已經敢了嗎?


發表您的評論

您的電子郵件地址將不會被發表。 必填字段標有 *

*

*

  1. 負責數據:MiguelÁngelGatón
  2. 數據用途:控制垃圾郵件,註釋管理。
  3. 合法性:您的同意
  4. 數據通訊:除非有法律義務,否則不會將數據傳達給第三方。
  5. 數據存儲:Occentus Networks(EU)託管的數據庫
  6. 權利:您可以隨時限制,恢復和刪除您的信息。