js+css3多彩文字飞入飞出动画特效

一款简单好看的js+css3多彩文字飞入飞出动画特效，一个个文字动画飞出组合成一条句子，每个文字的颜色随机，然后文字飞出消失。

分类：文字特效 > 文字动画难易：入门级

查看演示下载资源下载积分： 10 积分

js代码

<script type="text/javascript">
function _(x) {
  return document.querySelectorAll(x);
}

function r(min=0,max=0) {
  return min + Math.round(Math.random() * (max-min));
}

//wrap each letter with <span>
_('div')[0].innerHTML = ('<span>' +  _('div')[0].innerHTML.trim().split('').join('</span><span>') + '</span>');

var frame = 0;

setInterval(function() {
    if(frame%4==0)
    for(var i = 0; i < _('span').length; i++)
    {
      _('span')[i].style.opacity = 0;
      _('span')[i].style.color = '#' + r(3,9) + r(3,9) + r(3,9);
      _('span')[i].style.transform = 'translate3d(' + r(-150) + 'px, ' + r(-150) + 'px, 0px) rotate(' + r(-30,30) + 'deg)';
    }
  
    else if(frame%4==3)
    for(var i = 0; i < _('span').length; i++)
    {
      _('span')[i].style.opacity = 0;
      _('span')[i].style.transform = 'translate3d(' + r(150) + 'px, ' + r(150) + 'px, 0px) rotate(' + r(-30,30) + 'deg)';
    }
  
    else 
    for(var i = 0; i < _('span').length; i++)
    {
      _('span')[i].style.transform = '';
      _('span')[i].style.opacity = 1;
    }
    frame++;
}, 1050); </script>