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

📅  最后修改于: 2021-11-07 09:10:21             🧑  作者: Mango

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

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

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

npm install -g browser-sync

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

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



    
    
    GeeksforGeeks
    


    
         Home     


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;
    }
    }


第 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/ 上启动。