如何制作抖动动画

抖动动画是一种常见的动画效果，通过快速连续地改变元素的位置或属性，使其产生抖动的效果。下面是制作抖动动画的一种常见方法：

使用CSS3的关键帧动画（@keyframes）来创建抖动效果。关键帧动画允许我们定义在不同时间点上元素的样式。
首先，选择要应用抖动动画的元素，可以是一个图片、文字或其他HTML元素。
在CSS样式表中，使用@keyframes关键字定义一个动画名称，并指定动画的关键帧。

@keyframes shake {

 0% { transform: translateX(0); }

 10% { transform: translateX(-10px) rotate(-5deg); }

 20% { transform: translateX(10px) rotate(5deg); }

 30% { transform: translateX(-10px) rotate(-5deg); }

 40% { transform: translateX(10px) rotate(5deg); }

 50% { transform: translateX(-10px) rotate(-5deg); }

 60% { transform: translateX(10px) rotate(5deg); }

 70% { transform: translateX(-10px) rotate(-5deg); }

 80% { transform: translateX(10px) rotate(5deg); }

 90% { transform: translateX(-10px) rotate(-5deg); }

 100% { transform: translateX(0); }

}

在上面的代码中，我们定义了一个名为"shake"的动画，通过改变元素的transform属性来实现抖动效果。关键帧的百分比表示动画的进度，0%表示动画开始时的样式，100%表示动画结束时的样式。

接下来，将定义好的动画应用到元素上。

.element {

 animation: shake 0.5s infinite;

}

在上面的代码中，我们将名为"shake"的动画应用到类名为"element"的元素上。通过animation属性，我们指定了动画的名称、持续时间和循环次数（这里使用infinite表示无限循环）。

最后，可以通过调整关键帧的样式和动画的持续时间来定制抖动效果的幅度和速度。

@keyframes shake {

 0% { transform: translateX(0); }

 10% { transform: translateX(-20px) rotate(-10deg); }

 20% { transform: translateX(20px) rotate(10deg); }

 30% { transform: translateX(-20px) rotate(-10deg); }

 40% { transform: translateX(20px) rotate(10deg); }

 50% { transform: translateX(-20px) rotate(-10deg); }

 60% { transform: translateX(20px) rotate(10deg); }

 70% { transform: translateX(-20px) rotate(-10deg); }

 80% { transform: translateX(20px) rotate(10deg); }

 90% { transform: translateX(-20px) rotate(-10deg); }

 100% { transform: translateX(0); }

}

.element {

 animation: shake 1s infinite;

}

在上面的代码中，我们增加了translateX的位移和rotate的旋转，使抖动效果更加明显，并将动画的持续时间延长到1秒。

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

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足各种计算需求。产品介绍链接
腾讯云云数据库MySQL版：高性能、可扩展的关系型数据库服务。产品介绍链接
腾讯云内容分发网络（CDN）：加速内容分发，提升网站访问速度和用户体验。产品介绍链接
腾讯云人工智能（AI）：提供丰富的人工智能服务和工具，帮助开发者构建智能化应用。产品介绍链接
腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联设备。产品介绍链接
腾讯云移动推送（TPNS）：高效、稳定的移动消息推送服务，支持多种推送方式。产品介绍链接

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和情况进行。

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

有帮助

没帮助

相关·内容

如何使用SVG动画来制作游戏

游戏的灵感在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的CSS动画简直是绝配。...我们立即开始着手设计，讨论了所有的细节动画后（试着画出来并且配以音效），我便开始进行游戏开发。如何玩: 来回弹跳的球是可以改变颜色的。...这里是游戏的完整版: http://codepen.io/gregh/full/yVLOyO 目录创作的过程使用GreenSock来制作动画背景动画柱子动画分数的动画弹性盒子布局让游戏界面可缩放...当你在制作一个复杂的动画时，有一点是需要注意的。你完全可以使用一整个SVG当做背景，然后为这个SVG的子元素和路径来制作动画。...在制作方块的动画的时候，我们也使用到了相同的技术。

2.1K3 0

如何在 Photoshop 中制作 GIF 动画

gif 就像您可以在 Photoshop 中创建的迷你动画。当你制作 gif 时，你正在创建图层的运动。您可以从照片、矢量或从头开始制作动画 GIF。...在本教程中，我将向您展示如何在 Photoshop 中从头开始创建矢量 GIF。例如，我要制作一个圆形动画。同样的方法可以用来创建任何形状。让我们开始步骤吧！第 1 步：创建一个新文档。...时间线动画工作面板应该出现。选择选项“创建动画帧”。单击该按钮，您将看到显示的可见图层。步骤7：将时间更改为0.5秒，并选择永远重复选项。步骤 8：单击“时间轴”面板上的加号图标添加新帧。...第 9 步：点击并保存按钮，恭喜您，您已经创建了一个 gif 动画！如果您想对图像进行动画处理，请查看我们的教程。结论您可以使用上面的方法来创建切蛋糕、切披萨等的 gif。...您所要做的就是将红色圆圈替换为您想要制作 gif 的对象。

4593 0

Vue - 解决路由过渡动画抖动问题

同时路由还支持视图过渡效果，没有添加过渡动画的路由切换会感觉很生硬，为了提高用户体验，路由过渡还是很有必要的。毕竟做出来，自己看着也舒服。...过渡动效文档：https://cn.vuejs.org/v2/guide/transitions.html 过渡动画抖动代码片段这里为路由添加一个淡入淡出的过渡效果 ...图中可以很明显的看到，切换路由时，页面会发生抖动，而且抖动的还不小，看着强迫症都犯了。那么问题来了，为什么会出现这种情况?...仔细观察html的结构，会发现在路由过渡的过程中是会同时存在两个路由，一个是即将进入的路由，一个是即将消失的路由，这时想到有没有可能是其中一个路由占位导致抖动？...在缓慢的过渡，可以更加清晰的看到，在切换到下一个路由（fade-enter-to）时，上一个路由（fade-leave-to）会占位使得下一个路由的位置下移，所以在快速过渡的情况才发生类似抖动的效果

2.4K4 0

Canvas 动画制作

学过SVG的童鞋应该知道它是可以制作动画，那么Canvas是否能制作动画呢？答案是肯定的。所以今天我们就给大家来介绍一下Canvas制作动画。...Canvas动画制作原理简单一句话概括：不断的绘制与清除。...Canvas实现动画步骤（不断循环） 1、更新绘制的对象（比如位置的移动） 2、清除画布 3、在画布上重新绘制对象 Canvas 动画相关命令 clearRect方法 context.clearRect...Canvas动画制作实例 <!...y = 0; var timer = null; // 思路：进行清画布再次绘制（循环操作） /* * 功能：Canvas动画绘制

2.1K8 0

SVG - 动画制作

SVG - 动画制作 HTML5学堂：SVG - 动画制作。上一篇文章讲解了SVG的基本属性，大家能够利用SVG的基本属性进行绘制图像，那么如何让绘制好的图像动起来呢？...今天要给大家分享的是SVG的动画制作，具体我们来看看下面的内容吧。...SVG提供了比较方便的API接口，动画实现起来比较方便，具体看看下面的动画命令。...SVG 动画基本命令表示瞬间的动画设置用于实现单属性的动画效果颜色发生动画效果（也能够使用animate进行操作，因此，可忽略） <animateTransform...to：指定动画的结束值。 4、begin, end begin：指动画开始的时间。begin的定义是分号分隔的一组值。 end：指定动画结束的时间。与begin的取值方法类似。

3.2K10 0

字符动画制作

制作步骤一、用Pr把视频导出为帧图片和mp3 1.打开Pr,按ctrl+i导入需要制成字符动画的原视频 2.按ctrl+m导出为jpg图片，记得存进一个文件夹里，因为会导出大量图片，例如一个三分多钟六十帧的

2.1K1 0

如何用matlab制作演示动画并存储

之前给大家介绍过如何使用matlab绘制静态图像，但是实际应用过程中往往可能需要动态的展示计算结果，因此推出本期内容来介绍如何使用matlab制作演示动画并存储演示结果。...先给大家说明实现的思路以方便大家阅读程序：我们知道动画的原理就是多张静态连贯图像在短时间内快速播放而形成的影片。因此我们需要具备三个条件：静态图像、图像连贯、快速展示。...基于以上思路，以绘制李萨如图和三维螺旋线图来分别演示二维三维的如何具体实现。源代码：这里只注释李萨如图绘制部分代码，螺旋线绘制类似，无需赘述。...('X 轴'); ylabel('Y 轴'); xlim([-1 1]); ylim([-1 1]); title('李萨如图动画演示'); % 使用hold on保持图像帧 hold on; gg =...1; % 初始化因变量 lx = zeros(1,lenT); ly = zeros(1,lenT); % 实现动画过程的核心部分 % 这里的循环计次就相当于时间序列将各个静态图像串联起来 for k

2.5K4 0

iOS动画-定时对UIView进行翻转和抖动

NSNumber numberWithFloat: M_PI * 2.0 ]; rotationAnimation.duration = 1; // 切换界面保证动画不停止...]; [self.bindCardImageView.layer addAnimation:group forKey:@"bindCardImageViewAnimation"]; 抖动...CABasicAnimation* shake = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; //设置抖动幅度

1.3K6 0

html遮罩层动画制作,flash简单制作遮罩动画效果

flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有，从最初的出现的一点到后面全部出现，如此神奇的效果到底是怎么做的呢，一起来看看吧！...12、然后我们选中zhezhao图层，在时间轴中右键单击，创建补间动画。 13、接着选中图层，右键单击——遮罩。然后按ctrl+enter测试一下。 14、最后导出影片。 15、效果如下。...教程结束，以上就是flash简单制作遮罩动画效果教程，怎么样，大家学会了吗？感兴趣的朋友可以参考本文，来看看吧！

3.6K1 0

苹果安装动画制作

下载进度设置 weakSelf.sectorView.progress = weakSelf.progressView.progress; weakSelf.sectorView.hidden = NO; 动画原理...1、加载进度动画根据下载进度在UIView中画出中心区域扇形 - (void)drawRect:(CGRect)rect { // 定义扇形中心 CGPoint origin...设置扇形的填充颜色 [[UIColor blackColor] set]; // 设置扇形的填充模式 [sectorPath fill]; } 2、数据下载完成后外围灰边框动画....CGPath; _borderLayer.fillRule = kCAFillRuleEvenOdd; } return _borderLayer; } 添加一个过渡动画...animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; return animation; } 动画代理中该结束后

1.1K7 0

Pymol使用-制作动画

目的： >使用pymol制作可以用于展示的动画，这个取决于你要展示什么，这个教程会尽可能的遍历所有操作，先以命令行走一遍，然后以操作界面鼠标点击走一遍。...命令行输入界面 >红色边框标记的地方输入下面的动画指令 > ?...第一个动画 >Multiple Zooming #初始化 reinitialize #设置一个储存对象的matrix_mode，一个电影时间线， set matrix_mode, 1 set movie_panel...并且颜色为暗灰色 as cartoon color grey #非标准原子基团展示为sticks，颜色为绿色 show sticks, het color magnesium, het #设置一个480帧的动画框架

2.8K3 0

用Matplotlib制作动画

因为，从动画中，我们可以看到特定参数是如何随时间而变化的。上图是模拟雨的图像。此图由Matplotlib绘图库绘制而成，该绘图库常常被认为是python可视化数据包的原始数据组。...这些库可实现最先进的动画和交互动作。但是，本文重点在于研究数据库的一个方面——动画。同时，我们也将关注实现动画的方法。...动画 Matplotlib的动画基类负责处理动画部分。其可提供构建动画功能的框架。有两个主要接口来实现此功能： FuncAnimation：通过反复触发func.功能创建动画。...· 安装符合要求的 ffmpeg 或imagemagick方可将动画以mp4或gif的形式储存。一切准备就绪，就可以开始在JupyterNotebooks中制作第一个基本动画了。...基本动画：移动的正弦波在电脑中，利用FuncAnimation创建正弦波的基本动画。动画源代码可在Matplotlib动画教程中获取。先来看看输出代码，然后将其破译，并了解其中奥妙。

2.3K3 1

matplotlib动画制作（1）

假如视频有20帧，则frams也应该迭代20次传入func中绘制20个图像 interval：每一帧的时间间隔，单位ms，默认200ms repeat：动画是否循环播放，默认True blit：是否优化布局...可能需要根据提示更新包 ani.save(out_path, fps = 20) plt.show() 绘图逻辑：根据函数的构建框架，大致可以分为：1）画布分割；2）数据构建；3）更新函数编写；4）调用动画函数

4294 0

android开机动画制作工具,android开机动画制作

本帖最后由 nihao200823 于 2017-1-12 20:38 编辑 android开机动画制作与播放原理简介谁都想拥有一个华丽漂亮的开机动画，这让人心情舒畅，android是怎么来实现的？...怎么制作一个自己的开机动画？这里揭开android开机动画的神秘面纱。...1、制作开关机动画 1.1 开机动画的位置 system/media/bootanimation.zip，要修改开机动画就是修改bootanimation这个压缩文件。...如果你不会制作图片那么你可以先找2个动态图片来，把这2个动态图片分解出每一帧的图片，并保存为PNG格式，记得2个图片要一样大哦，然后吧图片按照bootanimation.zip的构造放进不同的文件夹，然后就可以制作出开机动画...然后依照这个方法再制造一个part1，就可以打包制作开机动画bootanimation.zip了。

2K2 0

用计算机制作动画的方法,电脑怎么制作flash动画？电脑制作flash动画的方法

Flash动画可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。一些初学者想要用电脑制作flash动画，但是不知道怎么操作？...其实Flash做动画有很多种方法，但最主要的是调关键帧，为此，大家一起看下电脑制作flash动画的方法。...windows7系统之家 – 15 、会打开如下图的一个界面，该界面，俗称动画制作窗口。...插入空白关键帧”，如下图 windows10 – 3、继续选择第20帧，通过工具栏在舞台中画出一个方形，并填充上与圆不相同的颜色，如下图 xp系统 – 4、我们都知道了，第１帧是个圆，第２０帧是个方形，那么，如何让他们产生动画呢...如下图 U盘系统 – 6、最后，按下键盘上的回车键，就可以看到动画效果了。 flash在制作动画领域以其专业性以及入门门槛较低的特点赢得了大量的用户，感兴趣的小伙伴可以一起来体验操作。

2K1 0

android+制作开机动画,Android 开机动画制作详解

Android 开机动画作为一个经常被 DIY 固件的玩家熟悉的内容，我这里简单做个总结。一、 Android 的2种类型：原生动画和第三方动画。 1....原生动画 Android 标准代码是带有一个开机动画的，就是我们常见的带有滚动阴影的 Android 字样，如下图为标准 Android 原生动画： 2....第三方动画： Android 支持客户自定义第三方动画，我们只要将做好的动画文件，命名为bootanimation.zip 打包固件的时候存储到 /system/media 文件夹下面，Android系统就能够自动使用第三方的动画作为开机动画...说明：Android原生的动画是使用openGL进行实时绘制的，所以在/system/media 无法找到 Android 原生动画的动画文件。二、 Android 第三方动画的制作： 1....必须的文件制作一个动画，最少包含一张图片和一个 txt 文件，将其打包到一个zip文件中，并命名为bootanimation.zip，如下为必须要的文件格式：必须要有一个文件夹part0，但是可以有更多的

3.4K3 0

用计算机制作flash动画教案,Flash动画制作教案

以下是出国留学网小编整理的高中信息技术《Flash动画制作》教案，供大家浏览参考。更多相关内容请关注出国留学网教案栏目。...高中信息技术《Flash动画制作》教案一：课题：Flash动画制作——绘制七巧板教学目标：熟悉Flash软件的操作界面运用Flash软件绘制七巧板教学重点：绘制七巧板教学难点：如何选用合适的工具正确绘制七巧板...，适宜网络图形和动画的制作。...高中信息技术《Flash动画制作》教案二：课题：Flash动画制作——计算机动画制作初步教学目标： 1：将原来静态的跑步姿态的图形加工为动态的跑步造型。...2：熟悉FLASH制作中的几个关键性的概念：图层、时间轴、帧等。 3：熟悉FLASH制作中的两种重要动画形式：形状渐变动画和运动渐变动画。

1K2 0

Silverlight制作逐帧动画

打算用sl来制作一个游戏,我曾经有flash开发游戏的经验.现在想用sl来做.打算记录下我开发游戏探索的过程....打开http://www.emu-zone.org/www3/host/emugif/ 这个网站.这里有很多游戏的gif动画.选一个存到本地用Fireworks打开.将其中的不同帧的图片取出做成一个png...新建立文件夹Controls.在这里我们放自定义用户控件.新建用户控件p.xaml 将刚才制作的png图片放入项目. 编辑用户控件 ?...在新建立的Canvas的外层制作一个矩形.刚好挡住其中的一个人物. 选中矩形和Canvas设置遮照. ? 建立storyboard ? 设置StoryBoard放大300倍这样方便处理. ?...至此动画制作完成 ?

1K9 0

ps制作透明背景动画

1、打开ps导入图片，然后抠图，去掉背景（不会抠图的自己百度） 2、Ctrl+J 多次复制图层，多复制几层 3、点击窗口找到时间轴，一次创建帧动画 4、点击每一帧，设置时间，同时一次打开右侧图层的眼睛即可...5、做好后，存储为web格式，选择gif保存即可最后欣赏下成品吧未经允许不得转载：肥猫博客 » ps制作透明背景动画

2K1 0

PPTMG转场动画简单制作

什么是PPTMG转场动画 MG动画，英文全称为：Motion Graphics，直接翻译为动态图形或者图形动画。通常指的是视频设计、多媒体CG设计、电视包装等等。...通俗的说，MG动画就是让图形和图形组合，按一定规律运动起来了，从而实现了想要表达的主题，具有科技感和时尚感，视觉效果明快，具有一定幽默和趣味性。...但是ppt可以做的到,不用ae可以说这是最简单的ppt动画一、画一个圆 ? 二、去掉线条，添加基本缩放动画 ? ? 三、按住ctrl复制3个，改变喜欢的颜色 ?...五、一个个改变动画效果 ? ? 就这么简单，总效果如下 ? 但是，这远远不够的 ? ? ? ? ? ? ? ? ? 好看吗？

1.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云