开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让SVG图标处于颤动状态？

SVG图标可以通过CSS动画实现颤动状态。下面是一个示例的CSS代码：

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-2px, 0);
    }
    20% {
        transform: translate(2px, 0);
    }
    30% {
        transform: translate(-2px, 0);
    }
    40% {
        transform: translate(2px, 0);
    }
    50% {
        transform: translate(-2px, 0);
    }
    60% {
        transform: translate(2px, 0);
    }
    70% {
        transform: translate(-2px, 0);
    }
    80% {
        transform: translate(2px, 0);
    }
    90% {
        transform: translate(-2px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.icon {
    animation: shake 0.5s infinite;
}

以上CSS代码定义了一个名为shake的关键帧动画，通过不断改变transform属性的translate值来产生颤动效果。然后，通过为SVG图标元素添加.icon类，并应用shake动画，使其处于颤动状态。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云对象存储（COS）：适用于存储静态资源和媒体文件等，详情请参考腾讯云对象存储（COS）。
腾讯云云服务器（CVM）：提供可扩展的计算能力，详情请参考腾讯云云服务器（CVM）。
腾讯云内容分发网络（CDN）：用于加速网站和应用的内容传输，详情请参考腾讯云内容分发网络（CDN）。
腾讯云容器服务（TKE）：用于部署、管理和扩展容器化应用，详情请参考腾讯云容器服务（TKE）。

请注意，以上只是腾讯云相关产品中的一小部分，腾讯云还提供了丰富的云计算解决方案和服务，更多详情请参考腾讯云官方网站。

相关搜索:如何让OneSignal playerId (userId)处于颤动状态？如何保持svg图标处于活动状态，切换选项卡颤动医生:设备处于脱机状态颤动区块未处于重建状态 CheckboxListTile处于颤动状态的AlertDialog 如何更改仅处于活动状态的图标？WebView处于颤动状态的溢出容器 ListView处于颤动状态的风扇横幅如何捕获错误:连接超时，socketException处于颤动状态如何让Ansible等待服务处于活动状态？扩展卡处于颤动状态。儿童泛滥 Carousel刷卡，详细信息处于颤动状态根据“喜欢”状态更改SVG图标颜色如何对齐图标引导菜单(处于折叠状态)如何在插槽处于活动状态时切换图标 LocationListener处于休眠状态时关闭GPS图标有什么简单的方法可以让今天的0am处于颤动状态？Microsoft团队，让当前用户处于通话状态如何让图标在颤动时从容器中出来状态栏中图标的颜色(颤动)

相关搜索:

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

有帮助

没帮助

相关·内容

我至今没想到，我也能在 CSS 中实现 SVG 动画了

动画是网络中不可或缺的一部分。与互联网早期使用 GIF 图像不同，现在的动画更加细腻和高雅。设计师和前端开发者利用动画使网站看起来更加精致，不仅提升用户体验，还吸引用户关注重要的元素，以传达信息。

01

【Flutter】自定义滚动开关

switch是两个状态的UI组件，用于在ON（选中）或OFF（未选中）状态之间切换。通常，它是带有拇指滑块的按钮，用户可以在其中来回拖拉以选择其他选项，例如“开”或“关”。它的工作就像房子的电源开关。

06

VsCode中使用Jupyter

（以前称为IPython Notebook）是一个开源项目，可让您轻松地在一个名为Notebook的画布上组合Markdown文本和可执行的Python源代码。

04

【音频处理】Melodyne 自动修正功能 ( 修正音高中心 | 修正音高补偿 | 节拍自动修正 | 量化时间 )

仔细观察编辑面板中的音符 , 很少有处于正中心位置的音符 , 大部分音符的音准都不准确 , 这里建议使用自动修正功能进行修正 ;

01

从 Web 图标演进历史看最佳实践

导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。

01

来自一位五年Android工程师APK体积优化的一些总结

这个使用的时候很简单，选中图片直接右键，conver to Webp...直接就能转换过来！越大的图片转换节约的体积也就越大！

03

Power BI 切片器可视化探索

Power BI 11月推出的新切片器视觉对象使得切片器可以有更好玩的效果。《Power BI 新功能：切片器添加地图》介绍了添加图像，本节介绍添加按钮填充背景。

03

微软VS Code已原生支持Jupyter笔记本，再也不用打开网页调试运行了

本月，微软给VS Code加入了一项令人感到惊喜的功能：直接在编辑器中运行调试Jupyter Notebook，而无需任何第三方插件。

04

Power BI可视化的巅峰之作：新卡片图

近两年分享了全球最多的Power BI SVG自定义图表方法，新卡片图使得SVG有了更大的舞台，以下罗列几种用法。

02

Power BI 按钮：自定义动画

Power BI的按钮可以设定动作，比如返回上一步，跳转书签，跳转网页链接等等。上一节讲述了如何自定义按钮图案（Power BI 按钮：自定义图标），本节讲解如何自定义按钮动画。

01

[踩坑]iconfont Symbol svg引入无法更改颜色

最近公司组织架构调整（反正每次组织架构调整，领导就会下场。有一个idea或者有重构一下，先定一个月底上），被拉取一个项目组做新项目。这边图标现状：有些项目是font-face方式，有些用的阿里图标库，最近又在用腾讯图标库，有些甚至直接切图。

03

IconJar Mac(图标管理工具)

Iconjar for mac版是一款可以在苹果电脑MAC OS平台上使用的支持 SVG/PNG/GIF 三种图标格式的图标设计应用，设计风格质朴，功能实用，拖入式导入管理，Iconjar for mac可以设置多个“Set”组合来分类管理图标，使用起来非常的简单方便。

02

高清ICON SVG解决方案（上） - 腾讯ISUX

随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。 1.多倍图片目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍，devicePixelRatio= 3就做三倍，有些人可

04

vite5+vue3+arcoDesign网页版webOS系统Vue3MacOS

历经半个月潜心研发，我的又一款原创新作vue3+arco仿macOS桌面pc版os管理系统项目正式完结了。

03

基于Vue的前端架构，我做了这15点

为什么选择了两个？因为公司团队跟倾向于使用 scss 开发，less 是为了覆盖 ant design vue 的样式，stylus 只有我自己喜欢这种风格。

02

基于 Vue 的前端架构，我做了这 15 点

https://juejin.cn/post/6901466994478940168

04

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

好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。

01

网站图标开发指南

图标是网站中非常友好的附加物，许多网站都会使用各种图标来美化页面样式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史，以及最优的解决方案。

03

小程序实践：基础内容icon，关于图标的5个实现方案等

使用图片也可以达到同样的效果，但是图片如果像素不够，放大了之后效果会虚；还有，图片需要另外存储与加载，使用起来不如图标只使用一个名称方便；再者就是，接下来会看到，图标可以随意改变颜色，而图像不能。

00

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

项目需要要在快速设置面板里显示一个VoWiFi图标（为了能够区分出来图形，我把透明的背景填充为黑色了）由于普通图片放大后容易失真，这里我们最好用矢量图（SVG(Scalable Vector Gr

09

【Docker项目实战】使用Docker部署bender个人仪表板

Bender可作为个人书签及导航工具在家庭、个人和小型企业的使用场景中，都可以帮助用户组织和管理他们的书签，并提供快速访问和分组功能，提高效率和方便性。

02

一篇文章带你了解SVG 图标

SVG图标是SVG图像，用作Web应用程序或移动应用程序内的图标或图像按钮。SVG图标也可以用于徽标。文章说明了SVG图标如何创建自己的SVG图标，以及在何处可以下载高质量的预制SVG图标。

03

三种 Loading 制作方案

Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。

01

超干！UI界面图标终极设计指南

静电说：今天静电看到了一篇非常棒的问题，详细阐释了图标设计过程中方方面面的知识点，今天，咱们就来看看设计师Slava Shestopalov的文章：

02

PowerBI 7月更新全面支持图标酷炫来袭

本月发布了峰会上的第一个功能，Icon集，它也解决了我们目前在ideas.powerbi.com上排名第一的想法。除了这一重大更新之外，我们还对许多现有功能进行了渐进式改进，例如关键影响因素视觉对象和RLS对聚合的支持。

04

[静Design译文] UI界面图标终极设计指南

UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。

05

BuildAdmin03：为什么要定义图标组件

说到图标，在BuildAdmin中用到的地方很多。比如上一篇中的折叠图标，还有菜单栏图标、导航菜单栏图标等。常见的图标有：ElementUI图标、font-awesome、iconfont阿里图标以及本地svg这四类图标。

05

推荐 8 个漂亮实用的 vue.js 进度条组件

为大家精心挑选了 8 个漂亮的 Progress Bars 组件，并附上 GitHub 链接和 vue.js 代码示例，以及Vue3 快速深入全攻略。

02

20多个好用的 Vue 组件库，请查收！

Vue Tables 2旨在为开发者提供一个功能齐全的工具集，以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外，Vue Tables 2正在不断成长、改进，同时也在获得新的功能。

01

BuildAdmin04：vue加载本地svg图标

上篇文章主要讲了图标组件Icon的实现，主要包括了两种常用的图标。今天就讲一下如何在Icon中加载本地的svg图标。

02

在Uni-app中使用自定义图标

1：使用矢量图标字体: 矢量图标字体库，如Font Awesome、Material Icons等。将矢量图标字体文件（通常是.ttf或.otf格式）添加到项目中。需要使用图标的地方，使用相应的类名来渲染图标。

03

Vue3！ElementPlus！更加优雅的使用Icon

这可能是目前最便捷、最合适的 Icon 使用方式了，特别是在 Vue3 中，等等，你以为它只是适用于 Vue3？不，不要被标题欺骗，它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架，同样，它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的，示例代码也是基于此。

04

Vue项目中优雅使用icon

icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字

02

适合前端开发和UI 设计的20多个最佳 ICON 库

在应用界面中图标的存在，会给用户一个良好第一印象，这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它们增加了可读性，突出了重要的内容，加强了功能或特性，增强了设计。因此，使用现成图标是很好的一个选择。

02

关于前端中图片的性能优化方案

在本地执行 node index.js 后，将会输出一串的<svg>标签，将其直接放入HTML文件中即可。非常的方便

02

图标字体应用实践

使用的时候，通过background-position调整显示的位置，如下图所示：

02

Power BI自定义表格图标条件格式：以服饰品牌2022价值榜为例

Brand Finance发布了2022服饰品牌价值排行榜，如下表所示。这个表格有个细节：排名高于去年时显示绿色向上图标；等于去年时显示黄色的等号图标；低于去年时显示红色的向下图标。

04

如何在Vue项目中更优雅地使用svg

最近看项目视频的时候对里面使用 svg 的方式感到很好奇，于是去网上查了一下，发现 svg 竟然也有类似于 css 雪碧图一样的用法，也就是 svg-sprite（孤陋寡闻了），而且配合插件后能够以组件化的方式使用 svg，非常方便。这里记录下一些相关用法。

02

Ant Design 是怎么管 Icon 的？

Ant Design 的 Icon，是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系；

03

Vue svg 及图标库(iconify)使用

iconify介绍 iconify是功能最丰富的图标框架。可以与任何图标库一起使用的统一图标框架。开箱即用的功能包括80多个图标集和超过70,000个图标 Vscode预览图标插件 Iconify IntelliSense 在vite中使用iconify 安装 #在组件可以快速使用所有图标,图标会通过在线导入 npm install --save-dev @iconify/vue 使用 <script setup> import { Icon } from '@iconify/vue'; </

01

解锁SVG新姿势：ChatGPT绘制图标+SVG Symbol自动导入

近期ChatGPT很火，作为前端er，我思考与尝试了让它帮忙写代码、帮助我解析与研究某些国内资料较少的技术、优化代码、解释代码、优化简历——都非常棒，就是很可惜GPT的图片能力还一般，如果什么时候它可以解析图片了，或许图片生成代码就不远了。

01

【源码放送】Python制作TIM登录界面完整源码

本源码来自于州的先生基于 Python 的 PyQt5 库制作的新版 TIM 登录界面。

02

Web图标的工程化方案

https://juejin.cn/post/6952150039732944910

01

Python完成SVG转PNG格式

一、完成目标：将SVG格式的图标转换为PNG格式的图标，并预览二、任务分析： svg是什么格式： svg格式的图像可任意放大图形显示，而且边缘异常清晰，生成的文件很小，方便传输，文字在svg图像中保留可编辑和可搜寻的状态，没有字体的限制 png是什么格式： PNG. （ 1996-10-01 ）. 便携式网络图形（英语： Portable Network Graphics ， PNG ）是一种支持无损压缩的位图图形格式，支持索引、灰度、 RGB 三种颜色方案以及 Alpha通道

02

Iconfont 还是不能上传，如何维护你的 Icon？

使用 iconfont 有很多优势，比如只需要加载一次，全部图标都可以设置字号大小，颜色、透明度等，可以随意变换字体的形态，并且图标是矢量的，不会随着字体大小的变化失真，得益于 iconfont.cn 提供的便利，大多情况下，我们不必上传自己的图标，只需要便捷的搜索，就可以将图标加入到自己的项目图标库中，但最近工作中却遇到了比较严重的问题。

03

Power BI 条件格式图标总结-2023版

Power BI的条件格式有五种模式，背景色、字体颜色、数据条、图标和Web URL。在这五种模式中，只有图标可以有无限的扩展性，其它四种功能比较单一。条件格式图标可以怎么玩？下面以五重境界进行描述。

01

CSS 图片去色处理

作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。

02

手撸一个前端天气卡片

我给DouWeather（后称DW）的定位是网页小组件，也是出于这个考虑，我参考了如iOS系统的小部件、新版MIUI系统小组件、鸿蒙系统小部件、win11小组件，发现都无一例外具有同一特征：扁平化，圆角，选用无衬线字体，元素风格简洁，并且四者都在或背景或图标中大量使用渐变，使小部件表现得较为灵动。其中win11小部件添加了浅阴影，可能是为了让小部件从亚克力背景中凸显出来。

05

Vue 使用 vue-svg-icon 插件实现 svg 按需加载

可以通过上述的一般用法在 Vue 中直接使用 svg，但既然已经是用 Vue来组件化开发项目了，那么在组件中穿插着一大段的 svg 也显得过于杂乱；

02

Power BI 按钮导航添加鼠标动画

但是，导航器不支持添加图标，按钮支持。以下GIF动画实现了按钮导航，左侧鼠标悬停时，出现勾选图标，右侧悬停时空心方块添加了勾选：

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭