資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何動態建立“@-Keyframe” CSS 動畫？
在 CSS 中，`@keyframes` 規則指定元素在動畫過程中應經歷的一系列樣式。在本文中，我們將學習如何使用 `@-keyframe` 規則中的這些序列來建立動態動畫。在 CSS 中，能夠響應使用者互動或更改來為網頁上的元件建立動畫被稱為動態動畫。文字、圖形和按鈕都是可以用來建立視覺上吸引人和引人入勝的使用者體驗的元件示例。
然後，這些樣式透過 `animation` 屬性應用於元素，該屬性設定動畫的持續時間、計時函式和其他屬性。
@-keyframe 動畫的視覺表示
語法
以下語法在示例中使用：
<div></div>
標籤在 HTML 文件中定義元素或區塊。
@keyframe mymove {
}
@keyframes 規定元素的移動位置，例如 top、bottom、left、right。Keyframes 是控制動態動畫的更好技術。
屬性
示例中使用的屬性如下：
text-align - 將 h1 元素定義為居中。
color - 定義 h1 元素的顏色。
width - 定義 div 元素的寬度。
height - 定義 div 元素的高度。
position - 定義絕對值，顯示固定值。
animation - 透過動態動畫移動來定義值。
border-radius - 定義角邊框的半徑。
background - 定義 div 元素的背景顏色。
opacity - 定義 div 元素的不透明度級別。
示例 1
在這個示例中，我們將使用兩個 div 元素，使用 `border-radius` 屬性建立一個圓形。為了使圓形移動，它將使用 `@keyframe` 動畫來設定 CSS 屬性。這在網頁輸出中表示動態動畫。
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
color: red;
}
div {
width: 100px;
height: 100px;
position: absolute;
animation: mymove 10s infinite;
border-radius: 50px;
background: grey;
opacity: 0.8;
}
@keyframes mymove {
10% {top: 110px;}
25% {bottom: 200px;}
75% {right: 250px}
100% {bottom: 300px;}
}
</style>
</head>
<body style="background: gold;">
<h1>The Animation using @keyframe</h1>
<div></div>
<div><div>
</body>
</html>
示例 2
在這個示例中，我們將建立一個 div 元素來設定單個框，並使用元素選擇器（即 div）來定義其屬性。為了使 div 元素動態移動，它將使用 `animation` 屬性和 `keyframe` 類（來設定移動位置）。
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
color: red;
}
div {
width: 100px;
height: 100px;
position: absolute;
animation: mymove 10s infinite;
background: purple;
opacity: 0.2;
}
@keyframes mymove {
10% {top: 110px;}
50% {bottom: 200px;}
40% {left: 50px;}
30% { right:70px;}
}
</style>
</head>
<body style="background: powderblue;">
<h1>The Animation using @keyframe</h1>
<div></div>
</body>
</html>
結論
以上兩個輸出顯示了使用 CSS 動畫表示動態動畫。Keyframes 透過在其中設定一些 CSS 屬性來使用 `@-keyframe` 類表示。Div 元素根據使用者的喜好進行設計，形狀可以是正方形、圓形、矩形等。
542 次瀏覽
