jq的动画、css3动画

2019-09-10 郑州网站建设  

在实现动画效果,我们可以采用css3或者jQuery,而在jQuery中我们通常采用animate。先了解animate的语法:

(selector).animate({styles},speed,easing,callback)

1、{style}:规定产生动画效果的一个或多个 CSS 属性/值。(具体w3c等可查,这里不累赘)

2、speed:规定动画的速度。采用取值的方式有三种

毫秒

‘slow’

‘fast’

3、easing:规定在动画不同点的元素的速度。

默认值是‘swing’ 开头和结尾慢,中间快

'linear' 匀速

4、callback

我们来简单的实践一下

html代码:

jq的动画、css3动画

jq代码:

jq的动画、css3动画

效果

jq的动画、css3动画

如果我用css3如何做了,首先想到的是animation 、transition,虽然在pc的兼容性不好,现在前端工程师可能做大部分项目移动端。我们还是先了解animation的效果吧

jq的动画、css3动画

animation的基础语法:

selector{

animation:
animation-name 动画的名字
animation-duration 动画的周期
animation-timing-function 动画的速度曲线
animation-delay 动画的初始时间
animation-iteration-count 动画的次数
animation-direction 动画是否反相
animation-play-state 动画是否暂停
; }

animation-timing-fuction 的值

1、linear匀速
2、ease 速度为向下的抛物线;ease-in;ease-out; ease-in-out
3、常用的 cubic-bezier(n,n,n,n) ,可以做出很好的效果,如图所示:

jq的动画、css3动画

具体代码如下:
css代码

jq的动画、css3动画

html代码:

jq的动画、css3动画

animation-direction
1、normal 默认值。动画按正常播放。
2、reverse 动画反向播放。
3、alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
4、alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。

很多动画效果,根据基础变换出来,怎么能够写出诸多效果,网上有许多demo,可以参考,熟练生巧就会了。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1681.html转载请标明出处,谢谢合作!
标签:
  • 可以
  • 效果
  • 动画
  • 采用
  • 实现
  • 我们
  • jqcss3