資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 HTML 中匯入淡入淡出和縮放效果？
CSS 的`scale()`函式指定一個變換，該變換可調整二維元素的大小。由於縮放量由向量定義，因此它可以以不同的比例調整垂直和水平尺寸。結果，它會產生一個`
這種縮放變換由一個二維向量來表徵。它的座標指定每個方向的縮放量。
語法
scale(sx) (or) scale(sx, sy)
sx：表示縮放向量的橫座標的數字或百分比。
sy：表示縮放向量的縱座標的數字或百分比。
CSS 的淡入淡出過渡是一種視覺效果，當頁面上的元素（例如影像、文字或背景）逐漸出現或消失時會發生這種效果。為了實現這些效果，我們可以使用 CSS 的`transition`或`animation`屬性。當使用`transition`屬性時，我們只能指定初始狀態和最終狀態——沒有中間點。
在本文中，我們將討論在 HTML 中建立簡單的淡入淡出和縮放動畫的方法，並檢視一些示例。
使用 CSS 動畫屬性
**CSS 動畫**是用於在 HTML 中設定內容動畫的三種方法之一。CSS 動畫具有簡單的用途。它們使我們能夠在其影響的元素上設定 CSS 屬性的動畫。這使我們能夠做一些很酷的事情，例如使事物移動、淡入淡出、更改顏色等等。
CSS 動畫屬性在樣式之間新增動畫。此屬性是下面列出的 CSS 屬性的簡寫
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
示例
在這個例子中，我們將使用 CSS 動畫，由兩個關鍵幀定義。一個設定透明度為 0，另一個設定透明度為 1。我們的動畫設定為執行 6 秒，並且包含實際動畫細節的 `@keyframes` 規則的名稱為 `fadeAndScale`。因為我們的動畫本質上是在兩個狀態之間的轉換，所以我們只有 `from` 和 `to` 關鍵幀來定義動畫的行為。
此關鍵幀的內容正式定義了我們的觀察結果，透明度設定為 0，縮放函式設定為 90%。在 `animation-duration` 結束時，我們的文字將完全可見，並且其比例在最終狀態下設定為 100%。
在我們已經很細微的動畫中，另一個細微的效果是在結尾處輕微的反彈，我們的文字比需要的稍大一些，然後在文字淡入淡出並縮放時彈回原位。
這是由於緩動函式。儘管我們的關鍵幀為我們的透明度和縮放函式定義了明確的起始值和結束值，但緩動函式控制中間的屬性值，通常以超出起始和結束動畫時嚴格定義的邊界的新穎方式。
<!DOCTYPE html>
<html>
<head>
<title>Fade and Scale</title>
<style>
body {
background-color: #F5F5F5;
margin: 50px;
margin: 25px 0 0 0;
}
#container {
margin:20px;
width: 400px;
height: 220px;
background-color:lightsalmon;
border-radius:10px;
}
h3 {
font-size: 70px;
color: #FFF;
padding: 20px 10px 10px 90px;
transform-origin: 50% 100%;
-webkit-text-stroke: 1px sienna;
animation-duration: .3s;
animation-name: fadeAndScale;
animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}
@keyframes fadeAndScale {
from {
opacity: 0;
transform: scale(.7, .7);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
</style>
</head>
<body>
<div id="container">
<h3>Hello<br>World</h3>
</div>
</body>
</html>
使用過渡和變換屬性
`transition`屬性是以下屬性的簡寫：
`transition-property:` 指定將受過渡效果影響的 CSS 屬性的名稱。
`transition-duration:` 指定過渡效果完成所需的時間（秒或毫秒）。
`transition-timing-function:` 指定過渡效果的速度曲線。
`transition-delay:` 定義過渡開始後的時間間隔。
語法
transition: property duration timing-function delay|initial|inherit;
`transform`屬性在二維或三維空間中變換元素。此屬性使我們能夠旋轉、縮放、移動、傾斜等等。
語法
transform: none|transform-functions|initial|inherit;
示例
在這個例子中，主體最初在較小的比例下將透明度設定為 0，稍後使用過渡和變換屬性進行動畫處理。`onload` 事件用於在頁面載入時將透明度設定為 1，比例設定為 (1,1)。由於過渡和變換屬性，調整透明度和比例現在似乎會淡入頁面並增大尺寸。`transition` 屬性允許我們指定淡入和比例更改的時間。
<!DOCTYPE html>
<html>
<head>
<title>Fade and Scale</title>
<style>
body {
opacity: 0;
transition: opacity 10s, transform 10s;
transform: scale(0.5,0.5);
}
div {
background-color: aquamarine;
width: 200px;
height: 80px;
padding: 10px 40px 20px 90px;
}
</style>
</head>
<body onload="fadeandscale()">
<div>
<h2>Hello World!</h2>
</div>
<script>
function fadeandscale() {
document.getElementsByTagName('body')[0].style.opacity='1';
document.getElementsByTagName('body')[0].style.transform='scale(1,1)';
}
</script>
</body>
</html>
82 次瀏覽
