1.css3的transition;
实例:鼠标移入时盒子宽度逐渐变大为300px
<style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> <div></div>
2.CSS3的animattion+keyframes;
实例:盒子左右无限循环运动
<style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 3s infinite alternate; -webkit-animation:mymove 3s infinite alternate; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> <div></div>
3.使用window.setTimout()或者window.setInterval();
实例:盒子左右无限循环运动
<style> #demo { width: 100px; height: 100px; background: red; position: relative; } </style> <div id="demo" style="left:0;"></div> <script> var left = 0 , der = 0; setInterval(function () { left = document.querySelector("#demo").style.left; if (left == "0px") { der = 2; } if (left == "300px") { der = -2; } document.querySelector("#demo").style.left = parseInt(left) + der + "px"; }, 60) </script>
此方法的缺点是,可能会出现卡顿的现象,动画不顺畅
4.使用jquery动画相关的API;
实例:改变盒子宽度
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn1").click(function(){ $("#box").animate({width:"300px"}); }); $(".btn2").click(function(){ $("#box").animate({width:"100px"}); }); }); </script> </head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button class="btn1">Animate</button> <button class="btn2">Reset</button> </body> </html>
当然jquery中实现动画的API可不止这些,除了自定义动画之外,还有
显示与隐藏:hide(),show(),toggle();
滑动:slideDown(),slideUp(),slideToggle();
淡入淡出:fadeIn(),fadeOut(),fadeToggle(),fadeTo();
动画的操作:delay(),stop(),finish();
5.window.requestAnimationFrame()方法;
实例:盒子左右无限循环运动
<style> #demo { width: 100px; height: 100px; background: red; position: relative; } </style> <div id="demo" style="left:0;"></div> <script> //处理兼容问题 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var left = 0 , der = 0; function step() { left = document.querySelector("#demo").style.left; if (left == "0px") { der = 2; } if (left == "300px") { der = -2; } document.querySelector("#demo").style.left = parseInt(left) + der + "px"; requestAnimationFrame(step); } requestAnimationFrame(step);//动画开启 </script>
需要注意的是,如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame(),另外此方法是比较新的一种方法,需要注意下其兼容性的处理
相关推荐
flex的web开发实例,实现页面动画,一个不错的flex开发实例,
css基础学习、晋级实用demo。 web开发利器。 简单易懂的代码。
互联网在国内发生了翻天覆地的变化,不论是在技术还是商业上都到达了空前的高度,用户群体也开始从最初的PC端渐渐地...本章将通过多个实际开发场景,如地理定位、在线聊天、拍摄、播放器、动画、3D等,介绍HIML5实战开发。
html5+css3-css动画实例1,本次博客实例需要的一些资源,源代码,可自行下载研究,一起进步,共勉,一起加油
html5 canvas小人跳舞动画特效
多html5精美模板,含大量css特效,js动画效果,以及精美图片实例
实例1 一个简易的绘图程序 实例2 电子石英钟显示 实例3 用C#制作字幕显示屏幕保护 实例4 移动的按钮 实例5 抓图软件的实现 第三章 多媒体应用 实例1 WinForm中播放音频与Flash动画 ...
实例301 将Web页面中的数据导出到Excel并自动打印 476 11.4 利用CSS样式打印 478 实例302 利用CSS样式打印页面中的指定内容 478 实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印...
实例182 为程序添加快捷方式 实例183 设置其他程序中编辑框内的文本 实例184 执行一个外部程序直到其结束 实例185 调用具有参数的可执行程序 6.7 线程同步 实例186 利用事件对象实现线程同步 实例187 利用...
《html 5开发精要与实例详解》一共12章:第1章分别用2个案例演示了如何利用html 5中的结构元素来构建一个博客网站和企业门户网站;第2章用2个案例讲解了表单在html 5中的使用;第3章用6个案例讲解了如何利用canvas...
获取音频条数据 频谱动画数据代码 如果想要完整的音频动画插件可以看我其他资源
实例188 通过ADO方式实现指定时间段的信息检索 294 实例189 通过函数实现商品信息的检索 296 实例190 通过ADO方式实现输入页码跳转到指定页 297 实例191 通过函数实现单击页码跳转到指定页 300 实例192 ...
实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例...
WEB服务器攻击技术——案例及演示 提纲 ● web时代,脚本的舞台 ● 一次虚拟的web攻击 ● OS+DB ● SQL注入 ● 跨站 ● 挂马 ● 防御 ● 常用资源
用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...
Lottie-api 一个动态编辑Lottie-Web动画的库方法createAnimationApi 需要1个参数:Lottie动画实例返回动画API实例这是该库的唯一方法。 它将返回连接到它作为参数获取的动画的API的实例。 退货动画实例用法有关基本...