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/
上一篇: CSS布局各种居中总结
推荐阅读
-
HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
CSS3动画实现loading加载图标_html/css_WEB-ITnose
-
CSS3实现的3D旋转效果_html/css_WEB-ITnose
-
CSS3 实现loading动画效果_html/css_WEB-ITnose
-
CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose