图标和图像都是我们想要描述的事物的图形表示,但图标与普通图像的目标不同。图标是想法的一般表示,而图像则更具体。在 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
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/ 上启动。