資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究動畫過程中縮小圖示尺寸
為圖示或影像新增動畫對於改進應用程式的使用者體驗非常重要。在本教程中，我們將學習如何為圖示新增動畫。此外，我們還將學習如何在動畫過程中減小或增大圖示的尺寸。
我們將使用“transform: scale”屬性來更改動畫過程中圖示的尺寸。
語法
使用者可以按照以下語法在動畫過程中減小圖示的尺寸。
img {
animation: icon 5s infinite;
}
@keyframes icon {
0% {transform: scale(1);}
100% {transform: scale(0.6);}
}
在上面的語法中，我們將動畫新增到“img”元素。此外，我們在動畫關鍵幀中縮小影像以減小圖示的尺寸。
示例
在下面的示例中，我們使用了下載圖示，併為圖示設定了“300px”的寬度和高度尺寸。之後，我們添加了“icon”動畫關鍵幀以對圖示進行5秒鐘無限次動畫。
在“icon”關鍵幀中，我們在動畫完成20%、40%、60%、80%和100%時更改圖示的尺寸。我們使用“transform: scale()”CSS屬性在每個斷點處減小圖示的尺寸。在輸出中，使用者可以觀察到圖示動畫持續5秒鐘，並且其尺寸正在緩慢減小。
<html>
<head>
<style>
img {
height: 300px;
width: 300px;
animation: icon 5s infinite;
}
/* reducing the size of the icon using the transform CSS property*/
@keyframes icon {
0% {transform: scale(1);}
20% {transform: scale(0.8);}
40% {transform: scale(0.7);}
60% {transform: scale(0.6);}
80% {transform: scale(0.4);}
100% {transform: scale(0.2);}
}
</style>
</head>
<body>
<h3> Reducing the size of the icon during the animation using the CSS</h3>
<div class = "icon-div">
<img src = "https://img.icons8.com/ios/256/download-2--v1.png" alt = "donwload icon">
</div>
</body>
</html>
示例
在下面的示例中，我們使用了嬰兒房圖示。我們也像第一個示例一樣為圖示設定了300px的尺寸。
在“icon”關鍵幀中，我們減小圖示影像的高度和寬度以減小圖示的尺寸，而不是使用“transform: scale()”CSS屬性。在輸出中，使用者可以觀察到它與第一個示例的輸出類似，從而減小了圖示的尺寸。
<html>
<head>
<style>
img {height: 300px; width: 300px; animation: icon 5s infinite;}
/* reducing the size of the icon using the transform CSS property*/
@keyframes icon {
0% { height: 300px; width: 300px;}
20% {height: 260px; width: 260px;}
40% {height: 220px; width: 220px;}
60% {height: 160px; width: 160px;}
80% {height: 120px; width: 120px;}
100% {height: 50px; width: 50px;}
}
</style>
</head>
<body>
<h3> Reducing the size of the icon during the animation using the CSS</h3>
<div class = "icon-div">
<img src = "https://img.icons8.com/ios/256/babys-room.png" alt = "baby room">
</div>
</body>
</html>
示例
在下面的示例中，我們在動畫過程中增大圖示的尺寸，而不是減小它。這裡，我們使用了城市建築的圖示。
在“icon”關鍵幀中，我們在動畫中間將影像縮放50%。在輸出中，使用者可以觀察到圖示尺寸在4秒鐘的動畫過程中平滑地增大。
<html>
<head>
<style>
img {
height: 100px;
width: 100px;
margin: 50px;
animation: icon 4s infinite;
}
/* Increasing the size of the icon using the transform CSS property */
@keyframes icon {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
</style>
</head>
<body>
<h3>Increasing the size of the icon during the animation using the CSS</h2>
<div class = "icon-div">
<img src = "https://img.icons8.com/ios/256/city-buildings.png" alt = "City Buildings">
</div>
</body>
</html>
結論
在本教程中，使用者學習瞭如何為圖示製作動畫。此外，我們還學習瞭如何在動畫過程中增大和減小圖示的尺寸。我們可以使用“transform: scale()”CSS屬性或同時使用“height”和“width”屬性來更改圖示的尺寸。
瀏覽量：368
