js+css3多彩文字飞入飞出动画特效免费下载

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

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录