在本教程中，我们将创建一个酷炫、现代、干净的文本旋转器/旋转木马，具有渐变和模糊过渡效果，为您的网站增添多样性。

有了这个文本旋转器，wen可以在网站上显示关于促销、特惠、服务等的文本，从而创造出一种独特的效果。

如何使用它:

1.创建一个空的DIV容器来容纳文本旋转器。

<div id="box"></div>

2.文本旋转器的主要CSS样式。

.sl {
  display: block;
  position: absolute;
  top: 50%;
  left: 15%;
  right: 15%;
  text-align: center;
  transform: translateY(-50%);
  line-height: 60px;
  color: #dddedf;
}

span {
  margin: 10px;
  opacity: 0;
  filter: blur(20px);
  text-transform: uppercase;
  font-weight: 900;
}

.sl.active span {
  opacity: 1;
  filter: blur(0px);
  transition: 1s;
}

.active {
  z-index: 10;
}

3.在文档末尾加载最新的jQuery库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4.定义一组你想旋转的句子。

var sentences = new Array ('Sentence 1','Sentence 2','Sentence 3', ... );

5.激活文本旋转器。

// override the default animation speed here
var timer = 5000;

$(document).ready(function(){

  var total = sentences.length - 1;

  for (var i = 0; i <= total; i++) {

      $('#box').append('<p class="sl" id="textBox'+i+'"></p>');
       
      var max = sentences[i].length - 1;

      for (var j = 0; j <= max; j++) {
          $('#textBox'+i).append('<span style="transition: ' + Math.random()*3 + 's; transition-delay: ' + Math.random() + 's;">' + sentences[i].charAt(j) + '</span>'); 
      };

  }; 

  var maxBox = $('#box > p').length;
  var r = 0;

  $('#textBox' + r).addClass('active');

  setInterval(function(){ 

      $('#textBox' + r).removeClass('active');

      r++;

      if (r == maxBox) {
          r = 0;
      }
 
      setTimeout(function(){ 
          $('#textBox' + r).addClass('active');
      }, 2000);

  }, timer);

});

参见：

• JavaScript和纯CSS中的10个最佳文本旋转器

预览截图

带淡入淡出和模糊效果 文本旋转器/旋转木马