手機購物車添加動畫

標籤：

￥(‘.access_digital .add‘,‘click‘,function(){      var icoimg_btn = $(this).parents(".wtxt").siblings(".icoimg"),          wh = $(window).height(),//是文件視窗高度          ot = icoimg_btn.offset().top,          ds =  document.body.scrollTop,// ds = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;           icoimg_h = icoimg_btn.height();          bh = wh - icoimg_h - [ot - ds ];                       icoimg_btn.css({ bottom:bh,right:"50px" });           cur = $(this).parents(".wtxt").siblings(".icoimg");          cur.addClass("cur");                    setTimeout(function(){                      $(".cur").removeClass("cur");                        cur.removeAttr("style");             },800);  });

　　

 

 

css：

@keyframes ico{0% {     opacity:1;               }    100%{ bottom:0; left:3%;width: 0.1px;height: 0.1px;     } } @-webkit-keyframes ico{ 0% {opacity:1;     }   100%{ bottom:0; left:3%;width: 0.1px;height: 0.1px;     } }.icoimg{@include rounded(35px);@extend %pa;bottom:10px;left:75%;z-index:999;opacity:0;width: 35px;height: 35px;&.cur{@extend %block;position:fixed;opacity:1;}&.cur:not(:target){-webkit-animation-name: ico;-webkit-animation-duration:1s;-webkit-animation-iteration-count: 1;animation-name: ico;animation-duration:1s;animation-iteration-count: 1;}}

　　

手機購物車添加動畫