在动画期间减小图标的大小

图标和图像都是我们想要描述的事物的图形表示，但图标与普通图像的目标不同。图标是想法的一般表示，而图像则更具体。在 CSS 中，图标是使用与普通图像不同的一组属性定义的。我们不像对图像那样使用高度和宽度属性来定义图标的大小。因此我们需要使用不同的 CSS 属性来为图标添加动画。本教程将演示如何在 CSS 动画期间减小图标的大小。

在本文中，我们将使用font-awesome Icon 库来演示动画期间其大小的变化。我们假设您熟悉HTML和CSS，并且对 CSS 动画有基本的了解。

第 1 步：使用 npm 安装Browsersync。我们将使用 Browsersync 来启动服务器并提供一个 URL 来查看 HTML 站点和 CSS 动画，并使用 CDN(内容交付网络)加载字体真棒。我们将在全球安装 Browsersync。

npm install -g browser-sync

第 2 步：在您的项目根文件夹中创建一个index.html文件和一个index.css 文件。

• index.html：在该文件中添加以下代码。

html

    
    
    
    


    

         Home
    

第 3 步：我们将 CSS Animation 添加到font-awesome Icon 以减小 Icon 的大小。同样的方法也可以应用于在 CSS 动画期间增加图标的大小。 CSS 没有修改 DOM 结构的能力。它只能改变 HTML DOM 的表现形式。因此，当使用 font-awesome Icons 时，我们可以使用 font-awesome 库提供的预定义类设置图标的初始大小，如代码所示，但我们不能在 CSS 动画期间使用更改图标的大小这些类。要更改图标的大小，我们必须按照上述代码对 HTML 元素应用 CSS 样式。一些可用于设置字体真棒图标初始大小的预定义类的示例是 fa-xs、fa-lg、fa-2x 等。

• index.css：在该文件中添加以下代码段。

CSS

#icon i {
            font-size: 128px;
            animation: size 4s infinite 1s;
        }
@keyframes size {   
    0% {
        font-size: 128px;
    }
    20% {
        font-size: 100px;
    }
    40% {
        font-size: 80px;
    }
    60% {
        font-size: 60px;
    }
    80% {
        font-size: 40px;
    }
    100% {
        font-size: 20px;
    }
    }

第 4 步：要使用 Browsersync 启动应用程序，请在项目目录中运行以下命令，或者您可以直接在浏览器中运行 HTML 文件。

browser-sync start --server --files "*"

输出：这会在服务器模式下启动 Browsersync 并监视目录中的所有文件是否有*通配符指定的更改。默认情况下，应用程序将在http://localhost:3000/ 上启动。