CSS3 keyframes动画实现弹跳效果

首先，“回到顶部”、“用户反馈”这两个按钮是通过定位放在左下角上。

（1）“回到顶部”的按钮只有当滚动条有出现下滑时才出现

（2）“用户反馈”按钮，用户刚打开时会抖动一下，引起用户的注意，然后才定住。

我的实现做法

首先，这两个按钮我都使用定位的方式定位在右下角适合的位置上。然后，

一、"回到顶部"

1、因为如果我们没有滚动鼠标，“按钮”没有出现，所以，我首先是把按钮隐藏起来的display：none，然后再通过js计算滚动后的高度

滚动后高度计算：scrollt = document.,documentElement.scrollTop+document.body.scrollTop

可视区高度：winH=$(window).height()

2、然后这两个高度做比较，如果是大于，说明已经滚动了，“回到顶部”的按钮可以显示出来display:block

3、注意：

（1）主要窗口滚动，就触发代码$(window).scroll(fucntion(){})

 (2)兼容IE和chrome浏览器

document.documentElement.scrollTop+document.body.scrollTop

　　　　　　　　　　　　　　　　　　　　　　　　chrome(这个body获取的IE/FF得到的值为0)

代码：

//首页回到顶部和反馈入口 $(function(){$(window).scroll(function(){ //只要窗口滚动,就触发下面代码 var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度 document.body.scrollTop用来兼容chrome//console.log('滚动条的高度scrollTop1-'+scrollTop1+'-scrollTop2-'+scrollTop2);var winH = $(window).height(); // 获取可视区高度console.log('滚动后高度为'+'---'+scrollt);if( scrollt+winH >winH ){ //判断滚动后高度超过0px,就显示 $("#gotop").fadeIn(400); //淡出 }else{ $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动 }});$("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部$("html,body").animate({scrollTop:"0px"},200);}); });

 

 

 

                         

 

 二、“用户反馈”抖动

1、这个抖动的动画效果是使用css3动画做的、

代码如下：

/* feedback的弹跳效果 */ .css3-notification {-webkit-animation: bounce 1800ms ease-out;-moz-animation: bounce 1800ms ease-out;-o-animation: bounce 1800ms ease-out;animation: bounce 1800ms ease-out; }/* Webkit, Chrome and Safari */@-webkit-keyframes bounce {0% {-webkit-transform:translateY(-100%);opacity: 0;}5% {-webkit-transform:translateY(-100%);opacity: 0;}15% {-webkit-transform:translateY(0);padding-bottom: 5px;}30% {-webkit-transform:translateY(-50%);}40% {-webkit-transform:translateY(0%);padding-bottom: 6px;}50% {-webkit-transform:translateY(-30%);}70% {-webkit-transform:translateY(0%);padding-bottom: 7px;}80% {-webkit-transform:translateY(-15%);}90% {-webkit-transform:translateY(0%);padding-bottom: 8px;}95% {-webkit-transform:translateY(-10%);}97% {-webkit-transform:translateY(0%);padding-bottom: 9px;}99% {-webkit-transform:translateY(-5%);}100% {-webkit-transform:translateY(0);padding-bottom: 9px;opacity: 1;} }/* Mozilla Firefox 15 below */ @-moz-keyframes bounce {0% {-moz-transform:translateY(-100%);opacity: 0;}5% {-moz-transform:translateY(-100%);opacity: 0;}15% {-moz-transform:translateY(0);padding-bottom: 5px;}30% {-moz-transform:translateY(-50%);}40% {-moz-transform:translateY(0%);padding-bottom: 6px;}50% {-moz-transform:translateY(-30%);}70% {-moz-transform:translateY(0%);padding-bottom: 7px;}80% {-moz-transform:translateY(-15%);}90% {-moz-transform:translateY(0%);padding-bottom: 8px;}95% {-moz-transform:translateY(-10%);}97% {-moz-transform:translateY(0%);padding-bottom: 9px;}99% {-moz-transform:translateY(-5%);}100% {-moz-transform:translateY(0);padding-bottom: 9px;opacity: 1;} }/* Opera 12.0 */ @-o-keyframes bounce {0% {-o-transform:translateY(-100%);opacity: 0;}5% {-o-transform:translateY(-100%);opacity: 0;}15% {-o-transform:translateY(0);padding-bottom: 5px;}30% {-o-transform:translateY(-50%);}40% {-o-transform:translateY(0%);padding-bottom: 6px;}50% {-o-transform:translateY(-30%);}70% {-o-transform:translateY(0%);padding-bottom: 7px;}80% {-o-transform:translateY(-15%);}90% {-o-transform:translateY(0%);padding-bottom: 8px;}95% {-o-transform:translateY(-10%);}97% {-o-transform:translateY(0%);padding-bottom: 9px;}99% {-o-transform:translateY(-5%);}100% {-o-transform:translateY(0);padding-bottom: 9px;opacity: 1;} }/* W3, Opera 12+, Firefox 16+ */ @keyframes bounce {0% {transform:translateY(-100%);opacity: 0;}5% {transform:translateY(-100%);opacity: 0;}15% {transform:translateY(0);padding-bottom: 5px;}30% {transform:translateY(-50%);}40% {transform:translateY(0%);padding-bottom: 6px;}50% {transform:translateY(-30%);}70% {transform:translateY(0%);padding-bottom: 7px;}80% {transform:translateY(-15%);}90% {transform:translateY(0%);padding-bottom: 8px;}95% {transform:translateY(-7%);}97% {transform:translateY(0%);padding-bottom: 9px;}99% {transform:translateY(-3%);}100% {transform:translateY(0);padding-bottom: 9px;opacity: 1;} }

 

2、注意：

IE9+才支持

详细见表

 

查看效果：http://www.ingdan.com/

总结

以上是生活随笔为你收集整理的CSS3 keyframes动画实现弹跳效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。