数据结构
网络
关系型数据库管理系统 (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
