Font很棒的5个动画齿轮，如何排列不同的图标？
要排列不同的图标，可以使用CSS和HTML来实现。以下是一种可能的实现方式：
- 首先，创建一个HTML文件，并在文件中引入所需的CSS文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="gear gear1"></div>
<div class="gear gear2"></div>
<div class="gear gear3"></div>
<div class="gear gear4"></div>
<div class="gear gear5"></div>
</div>
</body>
</html>- 创建一个CSS文件（例如styles.css），并定义齿轮的样式和排列方式。
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.gear {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
position: relative;
}
.gear:before,
.gear:after {
content: "";
position: absolute;
background-color: #fff;
}
.gear:before {
width: 50px;
height: 50px;
border-radius: 50%;
top: 25px;
left: 25px;
}
.gear:after {
width: 20px;
height: 20px;
border-radius: 50%;
top: 40px;
left: 40px;
}
.gear1 {
animation: rotate 3s infinite linear;
}
.gear2 {
animation: rotate 4s infinite linear reverse;
}
.gear3 {
animation: rotate 5s infinite linear;
}
.gear4 {
animation: rotate 6s infinite linear reverse;
}
.gear5 {
animation: rotate 7s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}- 在浏览器中打开HTML文件，即可看到排列不同图标的动画齿轮效果。
这个例子中，我们使用了CSS的flex布局来居中显示齿轮。每个齿轮都是一个div元素，通过设置不同的动画延迟和方向，实现了不同的旋转效果。你可以根据需要调整齿轮的样式和动画效果。
请注意，这个例子只是一种实现方式，你可以根据具体需求进行修改和扩展。
相关·内容
1回答
我正试着用一种非常特别的方式来安排字体的动画齿轮(如下图所示)。 ? 我已经创造了一把我能得到的最接近的小提琴。webkit-animation: fa-spin 6s infinite linear;}
font-size: 84px; font-size: 70px; font<
浏览 39提问于2019-03-11得票数 5
回答已采纳
在woocommerce“添加到购物车”按钮上，我隐藏了文本并使用以下css将其更改为图标font-family: eicons;font-weight: 700;font-variant: normal;text-rendering: auto;
-webkit-font-smo
浏览 3提问于2021-02-21得票数 1
回答已采纳
在我的项目中，一些用户看不到FontAwesome图标，但我可以从我的终端看到它们。我用过像这样的字体很棒的图标：由于有些用户看不到它们，所以我已经将上面的代码转换为 font-family: 'Font
浏览 1提问于2017-12-21得票数 1
回答已采纳
我在我的主页()的顶部有4个字体很棒的社交媒体图标，上面有FB，LinkedIn，Google+和YouTube的超链接。但是点击它们什么也不做。右键单击并在新选项卡中打开可以正常工作。如何让这些图标正确链接？顺便说一下，在鼠标悬停时，Font Awesome图标上也有旋转动画。谢谢你的帮助。
浏览 2提问于2014-12-10得票数 0
1回答
我正在做一个网站，我试图添加一些字体令人敬畏的图标，在悬停增长。这是我到目前为止使用以下代码的结果： https://gyazo.com/a3c87288fe3b02439b577e585a73894d <ul> <em class="fa fa-instagram fa-3x" style="color:white">&a
浏览 34提问于2018-12-30得票数 0
回答已采纳
1回答
我正在使用Fontawesome的SVG图标：https://pro.fontawesome.com/releases/v5.8.2/js/all.js 它很棒，但对于我需要的几个图标来说，它太大了。有没有办法只挑选我需要的图标？我不介意托管这个文件在本地，如果我可以大大减少它的大小。 谢谢。
浏览 4提问于2019-06-20得票数 1
我正在为我的一个班级做一个项目，遇到了一个奇怪的定位问题。我有两个齿轮图标从字体-可怕的图书馆显示一个文字标志。一个齿轮的尺寸更大，屏幕上的位置稍微偏低，而另一个齿轮的位置几乎与较大的齿轮接触。在我的笔记本电脑上，铬元素以默认的16 in字体大小正确显示。当我切换到我的桌面(一个50英寸的4k电视显示器
浏览 8提问于2017-05-26得票数 1
回答已采纳
1回答
在修复了大多数bug之后，我被困在下面这个问题上：在搜索按钮时，我无法在repo中的任何文件中找到它(CTRL + SHIFT +F没有结果)。托管应用程序在任何地方都没有可见的齿轮图标，但是它在web元素"navbar侧栏切换“中引用(通过Chrome工具找到)。我尝试过的(如建议的)：
用正确的图标名称重新引用它:不可能，因为它没有被主动引用(&
浏览 6提问于2022-10-24得票数 0
我试着让字体很棒的图标显示在我的布局中，到目前为止只有圆圈播放图标显示，我看了，但是这是与字体很棒的类，我使用css Content属性，这样我可以用javascript更改图标，但是有些图标没有显示，就像这里看到的.button { width: 30px;
displa
浏览 2提问于2021-02-26得票数 0
回答已采纳
我想使用一些从字体可怕的图标，而不是谷歌的材料图标，但字体可怕的图标没有正确地排列在一个链接集合。-- Font Awesome Icon -->
<a href="#!"class="collection-item orange-text valign-wrapper"><i class="fab fa-github fa-2x left"><&#
浏览 3提问于2018-01-28得票数 1
回答已采纳
我正试着在输入占位符中使用字体精美的图标。 <input type="text" placeholder="" style="font-family:FontAwesome"/>这有什么问题吗我在占位符而不是图标中得到了一些奇怪的数字。
浏览 0提问于2016-01-16得票数 3
1回答
我想为我的网站登陆页面动画我的汉堡菜单。一位年长的朋友告诉我，他完全搞不懂如何激活我的菜单，而且对指示菜单的3栏功能完全不熟悉。
尽管如此，我还是想动一下我的汉堡菜单。我不想做标准的"3条“转换为"X"，它使用"WebKit”。为什么不简单地动画2-3低分辨率位图而不是加载Webkit？我不想再拖慢我的登陆页了。在CodePen (11岁)上有一个很好
浏览 7提问于2022-11-30得票数 1
我使用FontAwesome在我的React项目中显示图标，这是我通常显示图标的方式其中我有一个组件库，其中所有必需的组件都从FA库中导入并导出到底层项目<AccordionPanel id='favFood' title='Fav Food' icon='stroopwafe
浏览 3提问于2018-11-30得票数 2
我正在尝试得到一个字体很棒的图标来绘制onDocumentReady，但我有一些问题。填充是在动画结束之前发生的，并且填充根本不是动画。这里有一个类似的Github问题，所以我尝试了一下，因为它已经解决了。
浏览 2提问于2018-06-03得票数 1
1回答
因此，我的Gear应用程序进展顺利，但我遇到了一些应用图标的问题。我设计了一个漂亮的白色轮廓版的图标，它在设备上很好看，适合系统应用程序。
但在齿轮经理(电话)，它看起来很糟糕，因为背景几乎是白色的。可以为Gear Manager指定不同的图标吗?如果可以，如何指定？
浏览 4提问于2014-06-19得票数 0
回答已采纳
我的HTML页面上有一个齿轮图标，我想要像现实世界中的齿轮一样旋转。 我已经创建了一个控制旋转的CSS动画，但问题是齿轮本身并没有旋转，而是稍微旋转了一下，因此也改变了它的位置。这里是我的代码和代码笔的链接。none; animation-name: cog-spin; }
浏览 38提问于2020-10-18得票数 0
回答已采纳
2回答
我从零开始安装了Oneiric (没有升级)，而且我在桌面效果方面遇到了麻烦:统一非常慢--每当我单击工作区图标时，我要么没有动画，要么动画在完成前挂起一秒钟左右。其他的行为也同样没有反应。例如，每当我试图移动桌面上的窗口时，它都会落后一段时间，才能赶上鼠标指针。Gnome Shell感觉稍微好一点，但感觉不太好。我尝试过使用Nvidia的设置；我已经安装/删除了存储库中的每个nvidia驱动程序(目前正在使用nvidia-173)；我已经按照类似问题
浏览 0提问于2011-10-15得票数 6
我是一个网络开发的初学者，我最近开始使用Twitter Bootstrap，我知道它使用的是我已经知道如何使用的。但我也遇到了，上面说它是为Bootstrap构建的。
这两者有什么不同？我的意思是，其中一个是另一个的替代品吗？或者你应该在不同的地方使用它们？
浏览 4提问于2013-06-26得票数 81
我不明白为什么这个简单的HTML不能像我期望的那样呈现。我试过Edge、Chrome和FireFox，它们都将拇指向下和拇指向上渲染为彩色。我似乎不能改变它的默认颜色。因为所有的浏览器都以相同的方式呈现，所以我必须假设这种行为是正常的。我只是找不到任何文档来解释为什么特定的实体会有这种行为。
某些实体有什么不同吗？
浏览 1提问于2020-03-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
