欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3 keyframes动画实现弹跳效果_html/css_WEB-ITnose

程序员文章站 2022-04-26 21:37:19
...
首先,“回到顶部”、“用户反馈”这两个按钮是通过定位放在左下角上。

(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/