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 ...
随机推荐
- .NET源代码已经下载,潜心研读…
有兴趣的弟兄可以从这里下载:http://referencesource.microsoft.com
- 重要BLOG
Cloud http://www.cnblogs.com/CloudMan6/tag/OpenStack/ 算法基础 http://www.cnblogs.com/ECJTUACM-873284962 ...
- mvp 在 flutter 中的应用
在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...
- hive 排序 order by sort by distribute by cluster by
order by: order by是全局排序,受hive.mapred.mode的影响. 使用orderby有一些限制: 1.在严格模式下(hive.mapred.mod ...
- 【转】grep -v grep
1.grep 是查找含有指定文本行的意思,比如grep test 就是查找含有test的文本的行 2.grep -v 是反向查找的意思,比如 grep -v grep 就是查找不含有 grep 字段的 ...
- shell_script1
1.简介 2.read 3.运算工具 4.if/then结构 5.while循环 6.for循环 一.简介 1.什么是shell shell是用户与系统交互作用的界面.shell是一种命令解释程序 ...
- CSS3 响应式web设计,CSS3 Media Queries
两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件: <link rel="stylesheet" type="text/css" ...
- Replication--复制Token
--创建tokenDECLARE @tokenID AS INT;EXEC sys.sp_posttracertoken @publication = @publication,@tracer_tok ...
- RHEL7系统管理之资源管理
1. CGroup(控制群组).slice(切片).scop.service 控制群组(control group)是linux kernel的一项功能, 该功能允许linux对RHEL7中syste ...
- 0. 跟踪标记 (Trace Flag) 简介
一. 什么是跟踪标记 SQL Server 跟踪标记(Trace Flag),像是一个开关,可用来自定义SQL Server的某种行为或特性,在性能诊断,系统调试等方面较为常用.比如:开启1204或1 ...