阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Javascript 和 css实现⼀个持续的动画效果

      问题

      Javascript 和 css实现⼀个持续的动画效果

      答案

      定时器思路

      var e = document.getElementById(‘e’) var flag = true; var left = 0; setInterval(() => { left == 0 ? flag = true : left == 100 ? flag = false : '' flag ? e.style.left = ${left++}px : e.style.left = ${left--}px }, 1000 / 60)

      requestAnimationFrame

      //兼容性处理
      window.requestAnimFrame = (function(){
          return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function(callback){
          window.setTimeout(callback, 1000 / 60);
          };
      })();
      var e = document.getElementById("e");
      var flag = true;
      var left = 0;
      function render() {
          left == 0 ? flag = true : left == 100 ? flag = false : '';
          flag ? e.style.left = ` ${left++}px` :
          e.style.left = ` ${left--}px`;
      }
      (function animloop() {
          render();
          requestAnimFrame(animloop);
      })();
      

      使⽤css实现⼀个持续的动画效果

      animation:mymove 5s infinite;
      @keyframes mymove {
          from {top:0px;}
          to {top:200px;}
      }
      
      • animation-name 规定需要绑定到选择器的 keyframe 名称。
      • animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
      • animation-timing-function 规定动画的速度曲线。
      • animation-delay 规定在动画开始之前的延迟。
      • animation-iteration-count 规定动画应该播放的次数。
      • animation-direction 规定是否应该轮流反向播放动画

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录