在动画过程中缩小图标尺寸

cssweb developmentfront end technology更新于 2024/4/17 23:40:17

为图标或图片添加动画对于提升应用程序的用户体验至关重要。在本教程中，我们将学习如何为图标添加动画。此外，我们还将学习如何在动画过程中缩小或放大图标尺寸。

我们将使用"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>

示例

在下面的示例中，我们在动画过程中增大了图标的大小，而不是减小。这里，我们选取了城市建筑的图标。

在"图标"关键帧中，我们在动画中间将图像缩放了 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>