开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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元素，通过设置不同的动画延迟和方向，实现了不同的旋转效果。你可以根据需要调整齿轮的样式和动画效果。

请注意，这个例子只是一种实现方式，你可以根据具体需求进行修改和扩展。

相关搜索:Font Awesome根据页面显示不同版本的图标 Font React中很棒的图标 Font React页脚中很棒的图标 font- mat select中很棒的图标未按预期显示 Font在我的代码中没有显示很棒的图标 Font很棒的图标大小不会增加 Font很棒的图标没有出现，不确定原因 Font很棒的图标让导航栏太大了 Font很棒的图标，如何添加增长悬停效果？使用鼠标悬停为每个Font Awesome图标设置不同的特殊颜色

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Bootstrap 响应式框架第三集

是不能兼容小屏幕的，所以大屏幕的内容放在小屏幕中都是以 100%的宽度显示的（纵向排列） 3、可以在一个列(div)中，指定在不同屏幕下的宽度占比 <div class="col-xs...，然后再使用<em>图标</em>字体，从而保证客户端也会有<em>图标</em>字体文件 ***.css @<em>font</em>-face{ <em>font</em>-family:"自定义名称";...src:url('图标字体文件的路径'); } 使用图标字体选择器{ font-family:"自定义名称";...} 如何在网页中使用图标字体： 1、创建一个元素，必须保证为空 2、让元素的class="glyphicon glyphicon-*"...练习： 1、在页面中创建多个按钮，每个按钮上显示一个图标首页(房子)，配置(齿轮)，刷新，定位，购物车，发邮件，照相机，播放相关

3.9K3 0

H5C3第三节

动画库的使用 https://daneden.github.io/animate.css/ 字体图标我们经常把网页常用的一些小的图标，做成精灵图，然后通过background-position去调整位置...type=1 Font Awesome 使用 http://fontawesome.dashgame.com/ 弹性布局(伸缩布局) 布局：其实就是调整元素在水平和垂直方向上的布局方式。...CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。...flex属性上述讲的属性都是给父盒子设置的，接下来的几个属性是给子盒子设置的。 flex属性用来设置子盒子如何分配主轴空间 flex:1 order属性 order属性定义项目的排列顺序。...数值越小，排列越靠前，默认为0。

6892 0

Layui学习笔记，一起加油！

Layui容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。可同时指定四种css，分别在不同设备下生效。...栅格布局规则、响应式规则（不同尺寸的屏幕下如何显示）、响应式公共类（不同大小的屏幕下的布局方式block、none、inline）、列间距、列偏移（1-12）、栅格嵌套（栅格理论上可以无限嵌套）。...因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。...你可以通过 font-class 或 unicode 来定义不同的图标。...4.layui的动画，https://www.layui.com/doc/element/anim.html 5.layui的按钮，https://www.layui.com/doc/element/button.html

6483 0

uni-app开发一个小视频应用(二)

，接下来我们将完成首页的剩余部分，左侧信息栏组件、右侧图标栏组件，以及完善视频切换动画、播放控制等功能。...)，右侧图标栏组件设置一个固定宽度，然后让各种图标依次排列即可，如: // components/list-right.vue...，播放上一个视频，而这最关键的就是如何判断是向上滑动还是向下滑动。...判断好了是上滑还是下滑后，我们还需要对上滑和下滑作出正确的处理，我们需要能够拿到每个视频播放组件，然后调用视频播放组件上的相关方法对播放进行控制，这就是涉及到了父组件如何调用子组件上方法，父组件要想调用子组件上的方法...$refs.players返回的是一个数组，即所有播放组件的实例，我们通过不同的索引即可取得对应的视频播放组件，然后进行相应的播放控制了，接下来就是要给每一个视频播放组件添加上播放控制的方法，我们需要给

1.6K4 1

Python利用matplotlib万花尺画月饼

繁花曲线规（万花尺，万花规）也是应用之一，大小齿轮的齿数之比，约为最简分数时，其分母就是小齿轮的自转数，分母与分子之和就是图案中的花瓣数。而分子就是小齿轮沿着大齿轮的公转数。...所以，只要掌握这个最简分数，就能知道画出来的图案大概是什么形状的。总而言之，选择不同的齿轮与不同的孔，就可画出细腻、动人的各种曲线，例如玫瑰线、内摆线等等。...import numpy as np from numpy import sin, cos from matplotlib import pyplot as plt from matplotlib.font_manager...例如用for循环遍历生成渐变动画～ # 转数-内圆旋转次数 revs = 30 # 迭代次数，即沿绘制路径获取的点。...(-1.2, -1, '中秋\n快乐', bbox=dict(boxstyle='circle', fc="w", ec='orange', linewidth=4), fontproperties=font_set

1.2K4 0

每个前端开发者都应知道的25个实用网站

Gradients 如果你选对了颜色搭配，渐变效果可以让你的网站看起来很棒，但如果搭配不当，它们会让你的网站显得不专业。...在流行网站上查看设计的优点在于你可以看到其他网站如何解决现实问题并确保功能性，而不仅仅关注美学。还有Refero，它已经从各种真实网站中编制了超过12,000个完整页面截图。...Dribbble的不同之处在于，这些设计大多是模拟图，通常更注重美观。图形接下来，寻找免费使用的图形和图标可能会很困难，无论是用来解释产品的插图，还是提供更好用户体验的图标。...如果你更喜欢简单地复制和粘贴一些代码来加载你的图标，Font Awesome 是一个值得一看的网站。...动画最后，LottieFiles 为你提供了可供选择的免费动画，您可以轻松地将这些动画添加到您的网站中，使其更加生动活泼。

3244 0

3行核心CSS代码的rate评分组件，秀到你怀疑人生

用css实现一个rate评分 ❗ 核心代码也就三行，效果如下：目录原理代码基本布局先把默认的星星显示出来实现选中单个星星实现连同兄弟元素一起高亮然后把input反向排列鼠标移入预览选中效果...加入放大动画总结获取代码原理梳理如下：去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]、；借用5个radio单选框，把默认样式都去掉，显示默认的星星；用checked...伪类监听用户选中✅，由默认的星星变成高亮的星星；然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮；把5个radio单选框反向排列 ❗；代码基本布局这是我事先生成好的iconfont 一个很简洁的布局： <div class="rate-content...: "iconfont"; /*之前引入的iconfont字体*/ font-size: 30px; padding-right: 10px; } .rate-contentinput[name

7154 0

3行核心CSS代码的rate评分组件，秀到你怀疑人生

实现选中单个星星实现连同兄弟元素一起高亮然后把input反向排列鼠标移入预览选中效果加入放大动画总结获取代码 ---- 原理梳理如下：去找个好看的iconfont，[Iconfont...-阿里巴巴矢量图标库]、；借用5个radio单选框，把默认样式都去掉，显示默认的星星；用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮...；把5个radio单选框反向排列 ❗；代码基本布局这是我事先生成好的iconfont <link rel="stylesheet" href="//at.alicdn.com/t/<em>font</em>_1356455...: "iconfont"; /*之前引入的iconfont字体*/ font-size: 30px; padding-right: 10px; } .rate-contentinput[name...name="rate"]:hover~input[name="rate"]::after { content: "\e73c"; color: var(--main); } 效果如下：加入放大动画

4453 0

移动webapp前端开发小结

关于主屏图标、启动画片的设置，可参考： http://www.iinterest.net/2011/01/03/mobile-webapp-base/ 3、apple-mobile-web-app-status-bar-style...所以，我们需要为不同分辨率的设备，匹配不同的样式。如果有web端工作经验，应该不难想到自适应布局，即在整体布局上采用百分比，而不写具体的px值。除了整体布局，我们还需要考虑字体、图片/图标大小。...了解了媒体查询，我们最先想到的是针对不同分辨率的设备，设置不同的字体大小、图片图标的大小。设置字体大小问题不大，但是一个网站有很多个页面，图片、图标的个数一般有不少。...://bjango.com/articles/min-device-pixel-ratio/ 3、代码实例（图标宽高如何计算）前面说过，默认字号大小是16px 。...如果设计稿上，同一位置（比如Tab切换）上的图标大小不同，在切图时建议通过留白的方式将图标手动处理为相同宽高，这样就可以让图标对齐，避免在写样式时通过代码样式来微调图标。

1.3K2 0

3行核心CSS代码的rate评分组件，秀到你怀疑人生

实现选中单个星星实现连同兄弟元素一起高亮然后把input反向排列鼠标移入预览选中效果加入放大动画总结获取代码 ---- 原理梳理如下：去找个好看的iconfont，[Iconfont...-阿里巴巴矢量图标库]、；借用5个radio单选框，把默认样式都去掉，显示默认的星星；用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮...；把5个radio单选框反向排列 ❗；代码基本布局这是我事先生成好的iconfont <link rel="stylesheet" href="//at.alicdn.com/t/<em>font</em>_1356455...: "iconfont"; /*之前引入的iconfont字体*/ font-size: 30px; padding-right: 10px; } .rate-contentinput[name...name="rate"]:hover~input[name="rate"]::after { content: "\e73c"; color: var(--main); } 效果如下：加入放大动画

5261 0

比较好用的在线工具网站分享

腾讯出品，起码的安全性要比其他小网站要好的多吧 2.iconfont-矢量图标库阿里妈妈MUX倾力打造的矢量图标管理、交流平台。平常使用的所有小ico都能在上面找到。方便设计和开发人员。...等等都能进行转换 5.图标工厂-在线应用logo生成工具一键生成所有尺寸的应用图标和启动图。生成ios，安卓，PhoneGap 和WindowsPhone官方标准的logo尺寸图标。...6.Visualgo-数据结构和算法动态可视化平台一个在线动画的形式，展示各种数据结构和算法的平台。当前算法还比较少。...但是很酷的一个网站 7.卡巴斯基-网络威胁实时地图很酷炫的展示当前网络世界正在发生的各种攻击统计。可以作为窗口小部件嵌套到网页之中。 8.Font Awesome 网页矢量图标，绝佳使用方式。...也是一个学习数学的很棒的网站，可以让你形象理解各种方程式。 14.MSDN https://msdn.itellyou.cn/ 博主提供了微软的各种正版纯净系统的下载，包括微软的其他软件等。

2.4K2 0

CSS面试题总结

(8) css3的相关动画属性? CSS3动画三兄弟：transition、transform、animation。 (9) css文件有几种引入方式？...(12) 如何解决多个元素重叠问题？使用z-index属性可以设置元素的层叠顺序,适用于定位元素。 (13) CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？新增伪类有那些？...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化，往往会出现浏览器之间的页面显示出现差异。 (15) 说说你对边距折叠的理解?...相邻的元素之间没有其他非空内容隔开如何解决margin塌陷？...在菜单栏，或者一些图标的横向排列时，一个 float 就解决了，而且每个元素之间不会有任何间距(所以可以用 float 消除元素间的距离)； (20) line-height: 150%与line-height

8261 0

【网页特效】丝滑的 macOS Dock效果

加入 .dock 选择器，将图标居中以及横向排列，list-style 列表的样式设定为 none，margin 和 padding 设定为 0，display 设定为 flex，justify-content...再设定图标的样式，加入 .dock li 选择器，由于这里用的是表情符号，所以可以通过设定 font-size 来调整它的大小，font-size 设定为 6rem。...动画的原理首先我们了解一下这个效果的原理，举例我们将游标移动到第四个图标上的时候，它会放大。...然后运用相同的逻辑设定右边元素的放大比率，不同的是，这里的 offset 直接使用就可以了，而对于当前的图标呢，就直接设定为 1 + scale 就是最大值了。 ?...然后计算一下 top 相对于图标放大后的位移就可以了。再增加一点点的 transition 动画过渡的设定。 ?

1.5K2 0

你不知道的 Chrome DevTools 玩法

在调试面板最右边的齿轮图标处，有 Preserve Log选项，可以保存上一次打印的输出，这里用 Math.random 作演示。...第二行可以选择不同的动画组，此时下方面板将会更新为当前动画组的动画时间线。在中间拥有时间线的区域，可以理解为动画的进度条，可以通过拖动来跳转到动画对应的时间点。...把鼠标放在动画上面则可以看动画预览，这里最棒的就是可以体验不同动画组合过后的效果，并修改动画组的时间与延迟，甚至是关键帧偏移。...中间有一条红色的线，可以拖动它来控制当前动画执行的过程在哪里，这里注意左侧的拖动和右侧动画的转变。有了动画组，排列组合再也不是梦！...，当然还有很多很多调试功能没有介绍，毕竟如何利用好 DevTools 也是一门很深的学问，这些特性就留在日后开发中挖掘再来补坑吧。

8753 0

为什么要用SVG？- svg与iconfont、图片多维度对比

，具体用法如下代码设置title与desc标签即可：与icon font对比 1.渲染方式不同 icon font采用的是字体渲染，icon font在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的...3.ion font可读性不好 icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好 SVG的制作成本与维护成本目前制作SVG...项基本上是碾压了icon font，数据如下：页面图标数量：491个上图SVG案例中我用了两种不同引用方式，一种是在页面直接inline svg方式插入的方法和用svg sprite合并后引用图标的两种...2、大批量的测试结果SVG性能已经比较有保证了，但实际项目中一个页面不可能会存在这么多图标，我们按正常页面出现图标10-30个这个区间， _取15个图标为中间值在进行一次测试看看，结果如何：页面图标数量...svg sprites与png sprites差不多，Rendering也比图片要长很多，但最终两者之间综合所消耗时间差不多 ##SVG动画 SVG还有一项动画的能力，目前在许多H5中的有趣动画很多都是用

5.4K5 0

想要字体图标设计师却给了SVG？没关系，自己转

本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。...图标 fontName,// 字体名称，也就是css的font-family formats: ['ttf', 'woff', 'woff2'],// 要生成的字体图标类型...同一个Unicode在前端的html、css、js中使用的格式是有所不同的，在html/svg中，格式为&#dddd;或&#xhhhh;，&#代表后面是四位10进制数值，&#x代表后面是四位16进制数值...: scale(0); } } 然后通过css的transition设置过渡属性，这样就会以动画的方式缩小为0，动画结束后再更新nextName为name属性的值，也就是变成新的图标，再把这个css...类名去掉，则又会以动画的方式恢复为原来大小。

1.1K1 0

从零开始学 Web 之 CSS3（六）动画animation，Web字体

2、字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。...4、字体图标字体图标就是我们常见的字体，不过这个字体的表现形式为一个图标。这样我们就可以使用这些特殊的字体来代替精灵图了。...也是先下载需要的图标字体库文件，然后使用关键字 @font-face 生成自己的web图标字体。示例：注意：class 样式的第一个 fa 是必写的，表示的是用的 font-awesome 的字体图标。

1.4K1 0

你不知道的 Chrome DevTools 玩法

在调试面板最右边的齿轮图标处，有 Preserve Log选项，可以保存上一次打印的输出，这里用 Math.random 作演示。...第二行可以选择不同的动画组，此时下方面板将会更新为当前动画组的动画时间线。在中间拥有时间线的区域，可以理解为动画的进度条，可以通过拖动来跳转到动画对应的时间点。...把鼠标放在动画上面则可以看动画预览，这里最棒的就是可以体验不同动画组合过后的效果，并修改动画组的时间与延迟，甚至是关键帧偏移。...中间有一条红色的线，可以拖动它来控制当前动画执行的过程在哪里，这里注意左侧的拖动和右侧动画的转变。有了动画组，排列组合再也不是梦！...，当然还有很多很多调试功能没有介绍，毕竟如何利用好 DevTools 也是一门很深的学问，这些特性就留在日后开发中挖掘再来补坑吧。

1.9K2 0

Rhino犀牛软件中文版下载建模软件Rhino犀牛 7.4中文版

Rhinoceros 7.4是一款专业的3D建模软件，利用它可以创建、编辑、分析、提供、渲染、动画与转换NURBS线条、曲面、实体与多边形网格，并且不受精度、复杂、阶数或是尺寸的限制；它能轻易整合3DS...MAX 与Softimage模型功能部分，对要求精细、弹性与复杂的3D NURBS模型，有点石成金的效能；能输出obj、DXF、IGES、3dm等不同格式，并适用于几乎所有3D软件。...id=mt5ywZddvNlS2661N2K2 安装步骤 1右键以管理员身份运行安装程序 (图 1) 右键以管理员身份运行安装程序 2点击右下角【齿轮】 (图 2) 点击右下角【齿轮】...6复制Patch文件，粘贴到软件的安装目录（鼠标右键点击软件图标，打开软件所在文件夹）里面 (图 6) 复制Patch文件，粘贴到软件的安装目录（鼠标右键点击软件图标，打开软件所在文件夹）里面 7鼠标右键以管理员身份运行...推荐支持 OpenGL 4.1 的显卡。不支持超过 63 核的CPU。推荐使用带有滚轮的双按键鼠标。支持 SpaceNavigator 设备。苹果电脑需要Bootcamp的支持。

6502 0

重构不完全教程集之二

css3 生成内容 A Whole Bunch of Amazing Stuff Pseudo Elements Can Do 字体字体方面主要包括：字体渲染方式，浏览器默认字体及重置，@font-face...自定义字体，字体性能等字体渲染背后不得不说的故事字体渲染自定义字体@font-face详解移动端字体图标自定浅谈 google fonts icomoon 图片总得来说，图片的使用分为background...图片优化原则：能不使用就不使用（使用css3绘制简单的图形等）矢量图与位图选择挑选合适的图片格式（gif, png, jpg, webp等）及准备不同的规格大小（不同大小或retina屏）合并（...图片原理与优化 WebP 探寻之路 Web性能优化：图片优化 svg 目前svg最大的用途在图标及动画，最大的优点在于矢量图，可以任意缩放不失真，而且大小还比较小。...如respond.js（不建议ie8去做响应式）重排与重绘网页性能管理详解 10 Ways to Minimize Reflows and Improve Performance class命名如何命名

1.4K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭