动画 | 易学教程

webkitAnimationEnd动画事件

阅读更多关于 webkitAnimationEnd动画事件

在前面的文章中也有介绍过css3动画的内容，可见《关于transition和animation 》和《 webkitAnimationEnd动画事件》，今天又要唠叨一下这个东西了，随着知道的越多，然后就会发现自己还有更多的不知道。今天主要说的是利用animate制作帧动画。我们常见的loading效果，很多的动画效果并不是连续运动，而是一种逐帧运动的感觉。看一个简单的需要制作动画效果的图片：甚至就包括我们在这里写博客上传图片，等待上传这个过程中的loading动画，明显的效果是不能连续转动，不然总感觉傻傻的，最开始我也做了一个傻傻的连续旋转的动画，不知道怎么上传这种效果，没法只管的演示，我把所有代码全都贴上自己可以观察一下。 <div class="loading"></div> .loading{ width: 1.12rem; height: 1.12rem; position: absolute; left: 50%; margin-left: -0.56rem; top: 35%; z-index: 2; background: url(../images/loading.png) no-repeat center center; background-size: contain; -webkit-animation: rorates 4s infinite

8款超酷的HTML5 3D图片动画源码

阅读更多关于 8款超酷的HTML5 3D图片动画源码

1.HTML5移动端图片左右切换动画今天要给大家分享一款很不错的图片左右切换焦点图动画，并且支持移动端触摸滑动。功能上，这款HTML5图片播放器支持鼠标滑动、手机端触摸滑动以及自动播放。外观上，这款HTML5图片切换动画的两侧有淡化处理，因此更显立体效果。在线演示源码下载 2.可爱的CSS3圆盘时钟动画之前我们分享过一些基于CSS3和jQuery的圆盘时钟，比如纯CSS3实现圆盘时钟动画和HTML5/CSS3时尚的圆盘时钟动画。今天要分享的也是一款可爱的CSS3圆盘时钟动画，时钟背景是乳白色的，显得非常干净，另外，时钟也可以和你本地的时候保持同步。在线演示源码下载 3.CSS3 登录表单个性化登录按钮这是一款基于jQuery和CSS3的登录表单，登录表单的界面整体呈现扁平化风格，非常简洁和清新。当焦点在表单的输入字段上时，表单提示文字会出现一个小动画，同时这款CSS3登录表单的最大特点是其个性化的登录按钮，鼠标滑过也有不错的效果。在线演示源码下载 4.自适应jQuery焦点图插件支持移动端触摸今天我们要来分享一款很灵活的jQuery焦点图插件，和以前介绍的jQuery焦点图动画类似，它也提供左右切换按钮，同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。在线演示源码下载

jQuery效果--动画

阅读更多关于 jQuery效果--动画

jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 ps：只要设置相对的属性例如百分比之类，不断点击是一直会有动画效果的，但是如果设置为固定值，则只能显示一次语法： $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止： code: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); </script> </head> <body> <button>开始动画</button> <p> 默认情况下，所有 HTML

10款很酷的HTML5动画和实用的HTML5应用

阅读更多关于 10款很酷的HTML5动画和实用的HTML5应用

1、HTML5的画布花朵生成器可生成多种样式的花朵 HTML5非常流行，利用HTML5制作动画也非常方便，今天要分享一款利用HTML5 Canvas制作的花朵生成器，我们只需要在Canvas画布上点击鼠标，即可动态生成各种颜色样式的花朵，并且每一朵花都可以缓慢地旋转，非常炫酷。在线演示源码下载 2、HTML5/CSS3仿谷歌播放的垂直菜单今天介绍的一款CSS3菜单也是垂直菜单，是一款仿Google玩的垂直菜单，另外菜单左侧还有非常漂亮的小图标。在线演示源码下载 3、CSS3 3D按钮按钮有漂亮的边线今天要分享的这款CSS3按钮效果非常不错，是一款3D的按钮特效，当按钮按下时，按钮便会凹陷下去，这款CSS3 3D按钮还有一个特点，按钮左侧边有漂亮的边线。在线演示源码下载 4、10款造型奇特的CSS3进度条 /加载动画今天我们要分享10款造型奇特的CSS3进度条 /Loading动画，这10款进度条应用不仅有创意的外观，而且还有非常特别的动画效果。另外，有些进度条还可以用在Loading动画，效果也挺不错。在线演示源码下载 5、HTML5/CSS3动画进度条可用于投票结果分析今天我们要来分享一款很酷的CSS3动画进度条插件，这款CSS3进度条还可以用在投票结果分析，效果也非常不错。在线演示源码下载 6、非常个性化的CSS3自定义复选框和RadioBox的

Vue动画简述

阅读更多关于 Vue动画简述

概述 Vue 中可以使用 <transition> 和 <transition-group> 标签来定义元素的过渡或动画效果二者最大的区别是，在使用 v-for 循环时，必须使用 <transition-group> 标签。其他时候使用 <transition> 1.css类名你可以在 CSS 中使用过渡类名来定义，过渡的效果 .v-enter ：过渡开始前的状态 .v-enter-active ：开始过渡中的状态，多为定义时间，延迟和速率函数 .v-enter-to ：过渡之后的状态 .v-leave ：离开之前的状态 .v-leave-active ：离开过渡中的状态，多为定义时间，延迟和速率函数 .v-leave-to ：离开之后的状态以上的类名都对 <transition> 和 <transition-group> 生效直接在 CSS 定义即可 //CSS . v - enter { } . v - enter - active { } . v - enter - to { } . v - leave { } . v - leave - active { } . v - leave - to { } //HTML < transition > //使用时直接包裹想要过渡的元素外即可 < li > < / li > < / transition > 还可以使用行内

uni-app 使用动画 css 库(Animate) Animate.css

阅读更多关于 uni-app 使用动画 css 库(Animate) Animate.css

新手uni-app引入css3动画Animate.css库，animate.css是一堆很酷，有趣且跨浏览器的动画，供您在项目中使用。非常适合强调，主页，滑块和一般的加水效果，官方没有对它进行太多的说明，目前版本为3.7.2 ，动画库的使用方式很简单。详细说明使用教程以及如何设置动画快慢以及延迟新手uni-app引入css3动画Animate.css库新地址在这里下载 https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css 1.下载css3动画下载地址： https://daneden.github.io/animate.css/ 打开地址后点击Download Animate.css 新手uni-app引入css3动画Animate.css库随后鼠标右键保存为css文件新手uni-app引入css3动画Animate.css库 2.引入样式文件新建uni-app项目新建components目录把下载好的animate.css放入目录下，便打开app.vue文件引入公共css /*每个页面公共css */ @import url("/components/animate.css"); 新手uni-app引入css3动画Animate.css库 3.使用动画使用语法 <view

Unity 使用 Spine 动画

阅读更多关于 Unity 使用 Spine 动画

在 Unity 中，常常使用 Spine 来制作一些动画，引擎本身并不能直接播放 Spine 动画，需要额外导入一个 RunTime 插件库才能支持。运行库导入到 Spine 官网关于 Unity 插件的下载地址 spine-unity-download 直接下载最新的插件包，例如：Spine-Unity 3.6 runtime unitypackage ，然后直接导入工程中。这种方式是比较常用而且方便的，因为在导入插件核心库的同时，还是导入一些 demo 例子，帮助我们快速上手使用插件的 API ，因此这里我也选择使用第二种方式导入插件。建议新建一个空工程来导入相关 demo 了解插件的使用，而正式工程只导入 spine-csharp 和 spine-unity 两个部分即可。插件导入步骤在 Unity 菜单中依次点击：Assets->Improt Package->Custom Package 选中 Spine-Unity 3.6 runtime unitypackage 并导入，去掉 Spine Examples 的勾选（假如需要查看 demo 则点击 All ）点击 Import 完成导入，导入完成后在工程 Assets 下会多出一个 Spine 目录，表示导入成功。 Spine 资源导入步骤通常制作好的 Spine 动画导出时会有三个文件： .png 、

CSS 阴影动画优化技巧

阅读更多关于 CSS 阴影动画优化技巧

box-shaodw 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 希望 hover 的时候，盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 过渡到 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)。 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) OK，最简单的方法当然是： div:hover { width: 100px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）因为过渡动画是在两个不同的盒阴影状态在发生，所以在过渡动画的时间内，浏览器会不断的重绘盒阴影。而又由于阴影属于耗性能样式，所以这种动画给人的感觉多少有些卡顿。这里有一个小技巧可以优化这种情况下的阴影动画。

GASP动画的基本使用

阅读更多关于 GASP动画的基本使用

GSAP(TimelineMax、TweenMax) 什么是GSAP？ GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库。 GSAP优点 1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。 2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。 3、没有依赖。 4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。 GSAP提供4个库文件供用户使用 1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。 2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。 3. TimelineMax

css3实现超好看的旋转动画

阅读更多关于 css3实现超好看的旋转动画

核心代码border-radius，以及animation: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>转啊转</title> <style type="text/css"> html,body,div,a,p,span,ul,li { padding: 0; margin: 0; list-style: none; text-decoration: none; font-family: monospace; } .center { width: 500px; height: 500px; margin: 50px auto; line-height: 500px; text-align: center; position: relative; } .moveing1, .moveing2, .moveing3 { position: absolute; width: 300px; height: 300px; top: 20%; left: 20%; border: 1px solid #eee; background-color: rgba(10, 120, 120, .6); z-index: -1; } .moveing1 { border-radius: 38% 62% 63% 37% /

订阅动画