<h2>轮播动画简单实现</h2>    <p>现在的前端，越来越注重用户交互和体验，有很多动画和效果是很常见的，如本篇要讲的主题：轮播动画。这和以前经常听到的一个名词–”跑马灯“效果一样。在CSS3出来之前，都是通过JavaScript实现的动画，现在我们完全可以使用CSS3，性能有很大的提升，兼容性也已经很不错，尤其是移动端。</p>    <h2>JavaScript与轮播</h2>    <p>首先看看Js实现：</p>    <p>html结构如下：</p>    <pre>  <code class="language-css">    <h2>Js实现</h2>      <div class="wrapper-js">          <div class="container-js marquee">              <p>今天</p>              <p>明天</p>              <p>后天</p>              <p>今天</p><!-- 辅助元素，为实现循环轮播 -->          </div>      </div></code></pre>    <p>Js代码：</p>    <pre>  <code class="language-css">    <script type="text/javascript">          /**           * [marquee 轮播效果]           * @param  {[type]} ele      [轮播元素容器]           * @param  {[type]} delay    [轮播间隔时间]           * @param  {[type]} duration [轮播动画时间]           * @return {[type]}          [description]           */          function marquee(ele, delay, duration) {              if (!ele) {                  return false;              }                delay = delay || 2000;              duration = duration || 500;              var height = ele.clientHeight;              var active = true;              var len = ele.querySelectorAll('p').length - 1;                setTimeout(function() {                      active = true;                  ele.scrollTop = 1;// 开始动画                  setInterval(function() {// 一个一个元素轮播                      if (!active) return;                        if (ele.scrollTop % height === 0) {                      // 当有某一元素轮播完成时，重置active，并开始下一元素的轮播                          active = false;                          setTimeout(function() {                              active = true;                              ele.scrollTop += 1;                          }, delay);                          if (ele.scrollTop == len * height) {                              ele.scrollTop = 0;                          }                      } else {                          // 通过scrollTop值实现轮播滚动效果                          ele.scrollTop += 1;                      }                  }, duration / height);              }, delay);          }            marquee(document.querySelector('.marquee'));      </script></code></pre>    <p>通过以上代码可以看出，其主要使用元素的scrollTop值不断改变实现轮播滚动效果，同时为了达到循环轮播效果，必须在最后添加一个重复辅助元素。</p>    <h2>CSS3实现</h2>    <p>CSS3实现动画性能会有极大提升，特别是当页面动画较多或定时器较多时。</p>    <p>html结构：</p>    <pre>  <code class="language-css">    <h2>CSS实现</h2>      <div class="wrapper-css">          <div class="container-css marquee">              <p>今天</p>              <p>明天</p>              <p>后天</p>              <p>今天</p><!-- 辅助元素，为实现循环轮播 -->          </div>      </div></code></pre>    <p>可以看到，依然需要在后面添加一个重复辅助元素，实现循环轮播效果。</p>    <p>CSS代码：</p>    <pre>  <code class="language-css">    // 轮播动画          @-webkit-keyframes marquee {              0% {                  -webkit-transform: translate3d(0, 0, 0);              }              27% {                  -webkit-transform: translate3d(0, 0, 0);              }              33% {                  -webkit-transform: translate3d(0, -100%, 0);              }              60% {                  -webkit-transform: translate3d(0, -100%, 0);              }              67% {                  -webkit-transform: translate3d(0, -200%, 0);              }              94% {                  -webkit-transform: translate3d(0, -200%, 0);              }              100% {                  -webkit-transform: translate3d(0, -300%, 0);              }          }          @keyframes marquee {              0% {                  transform: translate3d(0, 0, 0);              }              /* 100/3 * (2s/2.5s) => 26.7% => 27% */              27% {                  transform: translate3d(0, 0, 0);              }              /* 100/3 =>33.3 => 33% */              33% {                  transform: translate3d(0, -100%, 0);              }              60% {                  transform: translate3d(0, -100%, 0);              }              67% {                  transform: translate3d(0, -200%, 0);              }              94% {                 transform: translate3d(0, -200%, 0);              }              100% {                  transform: translate3d(0, -300%, 0);              }          }          .wrapper-css {              width: 200px;              height: 30px;              margin: 10px;              overflow: hidden;          }            .container-css {              height: 30px;              -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */              animation: marquee 7.5s linear infinite;          }          .container-css p {              width: 100%;              height: 30px;              margin: 0;              line-height: 30px;              font-size: 18px;          }</code></pre>    <p>如上，我们使用CSS3定义动画关键帧，并结合transform位移实现无缝轮播动画，通过移动容器实现轮播效果，主要需要根据轮播元素计算动画关键帧点。</p>    <p> </p>    <p>来自：http://blog.codingplayboy.com/2017/03/14/marquee/</p>    <p> </p>