- 综合排序
- 最热优先
- 最新优先
- 来自专栏grain先森
前端-10款web动画插件
今天给大家带来了十款web前端动画插件，大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛，特别是图片和首页文章的动态加载。 这次我们分享的这款插件是基于Layui的，layui 是一款采用自身模块规范编写的前端UI框架，这款表格插件可以允许你非常方便的添加、删除表格行数据，并且通过服务器接口进行保存。 你只需要定制前端的数据列和后端的保存逻辑即可，数据交互均采用JSON格式。 ? 加载动画就是通过简单的这方形叠加形成的动画。 10.CSS3深色背景的垂直手风琴菜单 手风琴菜单我们已经分享过很多了，特别是垂直手风琴菜单更为常见，比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。
7.4K50发布于 2019-03-29 - 来自专栏小康的自留地
前端课程——动画
动画 什么是动画 CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。 实现动画包括两个部分： 用于定义动画的样式规则 用于设置动画开始、结束以及中间点样式的关键帧相对于传统使用JavaScript实现的动画方式，CSS3 新增的animation属性具有以下三个优点: 动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现画效果。 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。 keyframe-block-list 用于设置动画执行过程中的关键帧。 实现动画 ? 动画执行完成后回归原始状态且不需要触发条件。 normal 默认值 每个循环内动画向前循环 即 动画循环结束后回到起点重新开始 ? alternate 动画交替反向运行，反向运动时，动画起步后退，同时，带时间功能的函数也反向。
1.2K10发布于 2020-04-09 - 来自专栏企鹅号快讯
程序猿必备的10款web前端动画插件二
2.带有动画图像效果的实验 一组带有动画图像效果的实验，其中图像被打碎成矩形片段。由anime.js提供支持。在制作开发者/设计师页面布局概念之后，我们想要为图片上的部分动画尝试一些不同的效果。 4.新的字母效果和动画 一组新的字母效果和动画，用于俏皮的排版交互。我们玩弄悬停和点击交互来创建一些有趣的排版动画。对于一些动画，我们使用anime.js。 7.有趣的交互活动的字体动画和字母（悬停）效果 我们希望与您分享四个版式动画。信件是一件很棒的事情，他们允许这么多的有趣的互动和效果，以提高设计，使装饰头条脱颖而出。 对于一些动画，我们使用anime.js。Charming.js可以帮助我们处理字母所需的结构。 8.有趣的工具提示形状和动画 我们希望与您分享几个简单的工具提示动画想法。 10.SVG形状在滚动上变形和变形的装饰性网站背景效果 我们想和大家分享一下背景效果。这个想法是在滚动上创建一个装饰性的SVG形状。根据我们当前正在查看的部分，形状将变形为不同的形式。
6.3K70发布于 2018-01-04 - 来自专栏企鹅号快讯
程序猿必备的10款web前端动画插件三
1.一些想法预览或只是在悬停的文件夹上播放 这个想法是在悬停文件夹图标时显示一些动画，并显示某种内容的预览。我们想与你分享一些有趣的小悬停效果。这个想法是显示文件夹的预览动画。 当点击其中一个导航按钮时，我们离开当前房间，并进行下一个（或之前）的动画。 6.一个实验性的标签式导航概念 其中一个内容区域在点击一个项目后用动画打开。我们希望与您分享一个实验性的标签式导航。 这个想法是在与图像具有相同主色彩的悬停缩略图后面显示一个堆栈，然后以快速运动对元素进行动画处理。 为此，我们使用简单的叠加效果和一些动画来模仿您从第一人称角度尝试眼镜时所做的动作。 10.网格加载动画的启示 一组网格加载动画为您的灵感。这个想法是一旦他们加载显示网格项目有一个有趣的效果。 我们希望与您分享一组简单的，鼓舞人心的加载动画的网格物品。这个想法是在加载完成后显示一些带有（微妙）动画的图像网格项目。对于演示，我们有三个略有不同的网格布局，不同的排水沟和列号。
2.6K80发布于 2018-01-09 - 来自专栏grain先森
前端动画大乱炖
作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。 故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新，如有不当还望多多指正。 ? 实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。 并且重绘或回流的时间间隔紧紧跟随显示器的刷新频率（60 Hz或者75 Hz）； 在隐藏或不可见的元素中，将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量； 目前，主要浏览器Firefox 23 / IE 10
1.8K20发布于 2019-03-29 - 来自专栏林德熙的博客
win10 UWP 动画 动画入门
本文告诉大家如何写同一个简单的动画。 动画入门 本文开始写一个简单的动画，只是移动矩形作为本文的例子。 在 UWP 移动元素的动画，可以使用 RenderTransform 移动，然后使用动画修改 RenderTransform 进行动画。 关于元素移动，请看 win10 uwp 拖动控件 首先写一个简单的界面，只有一个矩形 <Grid x:Name="Bret"> <Rectangle x:Name 需要在 Resources 写动画，于是在页面写上动画，这里使用 DoubleAnimation ，注意需要 Storyboard.TargetName 说明动画的元素。 = (Storyboard)Resources["Filiberto"]; s.Begin(); } 点击F5就是可以看到界面出现矩形，按下按钮就向右走 win10
1.1K10发布于 2018-09-18 - 来自专栏clz
前端动画实现笔记
前端动画实现笔记 参加字节跳动的青训营时个人写的笔记。这部分是蒋翔老师讲的课。 动画：动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 主画师绘制关键帧，补间动画师补充关键帧。(而在前端中，补间动画师就由浏览器来当，如 keyframe 和 transition) 逐帧动画：每一帧都由主画师绘制。 (如由 steps 实现的精灵动画) 常见的前端动画技术：Sprite 动画、CSS 动画、JS 动画、SVG 动画、WebGL 动画 1. x1="10" y1="10" x2="100" y2="10" /> <! -- 10像素短划线，5像素空白。起点是(10, 10), 终点是(100, 10) --> 更多例子 2.2 path 这部分待后续填坑 例子 2.3 演示 不是本人写的。
2K40编辑于 2023-01-02 - 来自专栏vae
前端动画效果案例
1，CSS图片响应悬停效果 下载地址：链接：https://pan.baidu.com/s/1sxA2Xz8CcoqBiHdsnsNQpg 提取码：2hyq 2，纯scc轮播动画 下载地址：https:
2.3K20编辑于 2022-09-22 - 来自专栏云前端
前端动画实现总结
前端动画实现的几种方式 javascript直接实现 SVG（可伸缩矢量图形） CSS3 transition CSS3 animation Canvas动画 requestAnimationFrame 一般认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。在很多移动端动画性能优化时，一般使用16ms来进行节流处理连续触发的浏览器事件。 三.CSS3 transition transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。 Canvas动画 canvas作为H5新增元素，是借助Web API来实现动画的。 <! 总结 复杂的动画是通过一个个简单的动画组合实现的。
1.7K10发布于 2020-06-16 - 来自专栏TagBug
前端动画实现 - 笔记
动画的基本原理：什么是动画、动画的历史、计算机动画原理 前端动画的分类：CSS 动画、SVG 动画、JS 动画、如何选择 前端动画如何实现（主要是 JS）：JS 动画的函数封装、简单动画、复杂动画 相关实践：动画资源、工作实践、动画的优化 # 前端动画实现 - 笔记 # 动画的基本原理 # 什么是动画 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 快速、连续排列、彼此差异极小、制造错觉 # 动画的历史 如今前端动画技术已经普及 常见的前端动画技术 Sprite 动画、CSS 动画、JS 动画、SVG 动画和 WebGL 动画 按应用分类 帧率与人眼：一般每秒 10-12 帧人会认为画面是连贯的，这个现象称为视觉暂留。 (如 CSS 的 steps 实现精灵动画) # 前端动画分类 # CSS 动画 CSS animation 是常见的 CSS 动画实现方式： CSS animation 属性是 animation-name
3.5K30编辑于 2023-03-17 - 来自专栏grain先森
前端-动画大乱炖
作者：桂圆_noble http://www.jianshu.com/p/280e0ef90b96 作为一只前端开发者，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们 故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新。 ? 动画即童年 动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。 实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。 并且重绘或回流的时间间隔紧紧跟随显示器的刷新频率（60 Hz或者75 Hz）； 在隐藏或不可见的元素中，将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量； 目前，主要浏览器Firefox 23 / IE 10
1.4K20发布于 2019-03-29 - 来自专栏Web 技术
【前端动画】实现动画的6种方式
引言 动画基本上分类两类：补间动画和帧动画。 补间动画：补齐中间的动画。由浏览器帮助补齐中间的状态，开发者只需要定义开始和结束的状态。 帧动画：除了开始与结束状态，开发者还可以定义中间关键帧的状态，可以制作复杂的动画。 （❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~） Tip：为什么是16ms 上面例子中，我们设置的setInterval时间间隔是16ms。 比较 Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。 总结 复杂的动画是通过一个个简单的动画组合实现的。
1.3K10编辑于 2023-10-07 - 来自专栏IMWeb前端团队
前端迪士尼动画守则上
阅读此文章前，建议大家先观看一下这个迪斯尼的小视频, 本文的灵感来自于该视频的哈 该视频是描述迪士尼这么多年积累的动画开发经验和规则。 有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？ 我们知道在前端开发中，我们少不了使用css3 transiton(过渡)和animation(动画)来制作页面生动的交互效果。 然而生动形象的动画往往建立在正确的动画规则基础下。 看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。 如同下面这个css动画，小球的弹跳运用了守则一，显得更为生动 ? 如下面的css动画 ? 查看源代码 更多精彩，静等下一期哈！！！！！！！！！！！！！！！！！！！！！！！！！！！！
1.3K60发布于 2017-12-29 - 来自专栏IMWeb前端团队
前端迪士尼动画守则上
有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？ 当然有关系！ 我们知道在前端开发中，我们少不了使用css3 transiton(过渡)和animation(动画)来制作页面生动的交互效果。 然而生动形象的动画往往建立在正确的动画规则基础下。 ---- 看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。 当一个软性物体和地面撞击时，会有压扁和拉伸的状态，其真实的反映了现实中的物理碰撞情况，通过挤压和拉伸，极大的加强了物体碰撞时的动画效果，十分生动抢眼。 如同下面这个css动画，小球的弹跳运用了守则一，显得更为生动 ? 如下面的css动画 ? 查看源代码
96520发布于 2019-12-04 - 来自专栏cwl_Java
前端基础-jQuery动画效果
第9章 jQuery动画效果 jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。 演示动画效果 [08-演示jQuery动画（animate）.html] 9.1 三组基本动画 显示(show)与隐藏(hide)与切换(toggle)是一组动画： 滑入(slideUp)与滑出(slideDown // 1.如果不传，就没有动画效果。 ;同理 9.2 自定义动画 animate: 自定义动画 $(selector).animate({params},[speed],[easing],[callback]); // {params}：要执行动画的 （可选） 9.3 动画队列与停止动画 在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
4.5K20发布于 2020-03-26 - 来自专栏橙光笔记
Canvas系列（10）：动画初级
---- requestAnimationFrame 所谓动画其实就是快读绘制图片，由于人的眼睛更不上屏幕绘制的速率，所以看到的就好像连着的一样，也就形成了动画，动画片就是这个原理，canvas中的动画也是这个原理 提到动画就不得不说一个函数了，那就是requestAnimationFrame。 当然，对于一些简单与时间无关的动画特效，也可以不用关注这个时间，直接根据每次绘制时增加的速度去计算就好了，我们这里为了简单起见就不去动这个事件了。 ("canvas"); var context = canvas.getContext('2d'); var sW = 1; var lW = 4; var spacing = 10; // 绘制坐标系 requestAnimationFrame(animate); 看到animate还是了吗，此函数是canvas动画的“套路”，一定要熟悉它，几乎所有动画相关的代码都有该函数的身影。
1.1K32发布于 2020-10-19 - 来自专栏写代码和思考
Android开发(10) 动画（Animation）
概述 Android SDK介绍了两种Animation： Tween Animation：通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果，即是一种 渐变动画 ，或者说 补间动画。 Frame Animation：顺序播放事先做好的图像，是一种画面转换动画，或者说 逐帧动画。 渐变动画 4种渐变动画 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 实现动画的步骤： 1.准备一个animation对象，改对象可以看作是个动画对象，它描述（封装）了什么样式的动画。 画面转换位置移动动画效果 RotateAnimation画面转移旋转动画效果 XML方式 我也可以写一个描述动画的xml文件，放到资源文件的anim文件夹下。
82900发布于 2020-03-16 - 来自专栏零域Blog
前端弹性动画与 framer-motion 动画库初探
content {:toc} 前端动画的开发一直是我所热衷探索与研究的内容，本文将描述什么是拟真的动画效果，目前所流行的 React 动画库，以及一些基于 framer-motion 动画库的 demos 动画效果的真实体验 `timing-function` 的不足 说到拟真的的动画体验，本质是动画中的过渡动画带来的体感。 通常情况开发一个前端动画，会使用 CSS transition 来实现，动画中的变量值（如 div 的位移或角度等）与时间的关系是三次贝塞尔曲线（cubic-bezier），即 `timing-function 弹簧-阻尼系统中的运动 在很多 native 动画中，特别是 iOS 的系统动画中，可以感受到“拉动越小，回弹越小；拉动越大，回弹越大”的感受，这便是弹簧动画的效果 ! [] image.png image.png 2020年10月的周下载量几乎是2019年同期的10倍，这大部分得益于其 api 的友好性。
4.6K30编辑于 2022-03-28 - 来自专栏生如夏花绚烂
前端序列帧动画实现
原理 1.UI 提供精灵图/雪碧图（就是将序列帧排在一张图片上的图） 2.通过代码不断改变图片的位置，从而形成动画效果 代码实现 <style> .logo_gif { width: 300px; // 单个动画帧尺寸 height: 300px; cursor: pointer; background-image background-position-y: 0; animation: mouse-in 1.5s; animation-timing-function:steps(26); // 动画帧数量 animation-iteration-count:infinite // 动画循环播放 } @keyframes mouse-in{ background-position-y的值不能随便取，必须根据元素的大小乘以动画帧数量得出 如本例元素大小为300，虽然雪碧图的大小是 400 x 10400 我们不能写成 @keyframes
1.5K20编辑于 2022-09-08 - 来自专栏算法与编程之美
前端|利用CSS制作动画效果
问题分析 需要制作出此效果，我们首先需要对css动画有一定的了解，在此基础上，我们便能利用css代码写出此效果，那么关于css动画的代码有哪些呢？下面，我就为大家介绍一些关于css动画的代码。 结语 本文介绍了如何运用css动画制作一个立体正方体，当我们阅读这篇文章后，我们还可用css动画效果制作更多更好看的图像，如果需要，可进行多次练习、摸索，也可百度找一些模板观察。
2.3K40发布于 2019-07-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号