css3--js-jq动画效果
最近写网页时才发现原来css3的动画效果感觉还不错哦!但自己以前学的时候却没有当作重点,现在从新学习一下:
1:原理:
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间
2:@keyframes规则:
@keyframes animationname {/*animationname为动画的名称*/
keyframes-selector {/*keyftames-selector为动画时长百分比,值为从0~100%*/
css-styles;
}
}
但是目前浏览器都不支持 @keyframes 规则。Firefox 支持替代的 @-moz-keyframes 规则。Opera 支持替代的 @-o-keyframes 规则。Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
3:使用animate将动画与元素绑定:
css的animate的具体操作参考文档 http://www.w3school.com.cn/cssref/pr_animation.asp
div
{
animation:mymove 5s infinite;/*infinite表示重复无限次*/
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
4:W3school里给了这样一个例子:http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4,但是这样一个例子仅仅教会怎么用,但如何才能用它做出好看的效果呐?接下来介绍一些动画库,这些动画库做了许多好看的动画,并且大多都有源码,看这些动画库的目的主要还是学习人家怎么做的!不可完全套用
4.1animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现
查看演示:https://daneden.github.io/animate.css/
github地址:https://github.com/daneden/animate.css
使用时直接将animate.css引入,然后元素类名设为animate + 动画名称即可,或用JQuery为元素添加类名
4.2magic.css
查看演示:
http://www.17sucai.com/pins/demoshow/10001
github地址:
https://github.com/miniMAC/magic
使用时直接将magic.css引入,然后元素类名设为magictime + 动画名称即可,或用JQuery为元素添加类名
4.3Effeckt.css
查看演示:
http://www.gbtags.com/gb/linkviewer/3147.htm
4.4.hover.css
查看演示:
http://ianlunn.github.io/Hover/
github地址:
https://github.com/IanLunn/Hover
4.辨析transform
transform的含义是:改变,使变形,转换,
属性有:rotate()
(旋转) / skew()
(倾斜) / scale()
(比例) / translate()
(位移)并且还有x,y轴之分
区别在于动画可以循环,而transform只执行一次
5 :javascript操作动画:
可以通过动画使样式以一定的速率逐渐变化。如果要实现移动的动画效果,则可以对被设定为position:absolute的元素的left属性进行渐变。如果要实现淡入淡出的效果,则可以逐渐改变元素的透明度opacity的值。
为了使样式可以以一定的速率逐渐变化,自然就需要让javascript定期执行,set Interval能够定期执行javascript函数,css3也可,推荐css3实现
1 <div id = "foo" style = "position:absolute">This is a sample.</div>
2 <script>
3 var elem = document.getElementById('foo');
4 var frame = 0;
5 setInterval(function(){
6 frame+=1;
7 elem.style.left = frame*10+'px';
8 },100);//每经过100毫秒将向右移动10px
9 </script>
6:JQuery辅助操作动画
JQuery不仅提供了一些更改样式的简单方法,还准备了不少能够在执行动画的同时更改样式的方法。这些方法常常能够接受以下参数:duration(动画持续时间),easing(动画加速度),以及动画结束时的处理方式(callback)
方法 | 说明 | 方法 | 说明 |
hide | 隐藏元素 | show | 显示元素 |
toggle | 切换元素的隐藏状态 | fadeln | 对元素执行淡入效果 |
fadeOut | 对元素执行淡出效果 | fadeToggle | 如果元素被隐藏则淡入,否则淡出 |
fadeTo | 将元素不透明度渐变为opacity参数 | slideDown | 向下滑动元素 |
slideUp | 向上滑动元素 | slideToggle | 如果元素被隐藏则向下滑动,否则向上滑动 |
animate | 将元素的css变为props的状态 | stop | 停止动画 |
queue | 取得队列 | dequeue | 去除队列中的第一个元素并执行 |
delay | 以duration为时间暂停队列的处理 |
7:JQuery之animate()方法自定义动画
7.1 语法
$(selector).animate({params},speed,callback);
/*必需的 params 参数定义形成动画的 CSS 属性。*/
/*可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。*/
/*可选的 callback 参数是动画完成后所执行的函数名称。*/
7.2 实例:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head> <body> <button>开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html>
7.3 animate的用法很多,并且默认地,jQuery 提供针对动画的队列功能
7.4 停止动画stop() 关闭动画 JQuer.fx.off属性值设为false
css3--js-jq动画效果的更多相关文章
- JS/JQ动画效果
1.弹出框 <style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: ...
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
- css3中的动画效果
css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
随机推荐
- Django随笔
入门 小Demo设计介绍 本示例完成“图书-英雄”信息的维护,需要存储两种数据:图书.英雄 图书表结构设计: 表名:BookInfo 图书名称:btitle 图书发布时间:bpub_date 英雄表结 ...
- Gson基本操作,JsonObject,JsonArray,String,JavaBean,List互转
(转自)https://www.cnblogs.com/robbinluobo/p/7217387.html String.JsonObject.JavaBean 互相转换 User user = n ...
- redis 集群目标、集群查看、配置方法及过程、哨兵配置启动
集群目标 主从复制,读写分离:故障切换(通过哨兵实现) 查看集群状态 info replication 配置方法 只设置从数据库就可以了:最佳实践,在主数据库配置masterauth <mast ...
- js 和springboot内存图
- JVM知识(三):内存模型和可见性
这篇文章我们将根据JVM的内存模型探索java当中变量的可见性以及不同的java指令在并发时可能发生的指令重排序的情况.来聊聊java线程对一个变量的更新怎么通知另一个线程,及volatile的作用和 ...
- Management Studio 插件生成安装包要点(以ProjkyAddin为例)
通过Visual Studio向导生成Management 插件框架就不说了,网上能搜到不少资料.本篇重点是说明怎么设计一个插件安装包,适用于Management Studio 2005 到2014的 ...
- 要提高SQL查询效率where语句条件的先后次序应如何写
我们要做到不但会写SQL,还要做到写出性能优良的SQL语句. (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句 ...
- 安装matplotlib
1.1 Linux中安装matplotlib 如果使用的系统自带的python版本,可使用系统的包管理器安装matplotlib,命令如下: $ sudo apt-get install python ...
- 虚拟机上的Linux Java开发环境部署记录(VirtualBox+Ubuntu)第一章-基础环境搭建
创建虚拟机时需注意三点: 在BIOS中开启Intel VT,以支持64位虚拟机系统: 对于Ubuntu 16以上版本,至少分配10G以上初始控件. 增加一块网卡,选择Host-Only网络,用于主机和 ...
- Ubuntu 14.04 修改时区
执行下面命令,并按照提示选择"Asia/Shanghai": sudo dpkg-reconfigure tzdata 正常执行结果为: Current default time ...