jquery 插件 lettering.js

lettering.js(去github下载)是一个功能强大的jquery插件

作用:对字母、单词、或者段落进行分割

思想:把单词分成一个一个的字母,然后对字母进行效果处理

使用:1.首先加载jquery和lettering.js

2.对要分的div h1运行函数littering('').参数可以是words,line,默认为空,即为字母分割

3.注意div中必须有h1或者span这样的tag把字母包含才可以运用,不能直接用div来包含要分割的文字(不然会有很多莫名其妙的空span出现)

如下图所示,先分割每个字符,然后用sass循环赋予不同颜色和不同延迟的animation,在hover的时候添加动画,完美!

@mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) {  
  color:$color;  
  $color:darken($color,30%);   
  $output: '';  
  $x:0px;  
  $y:0px;  
  @for $n from 1 to $steps{  
    $output: $output + '#{$x} #{$y} 0 #{$color},';  
    $x:$x+$dx;  
    $y:$y+$dy;  
    $color:darken($color, $darken * ($n+10));  
  }  
  $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);';  
    
  text-shadow:unquote($output);  
} 

@for $i from 1 through 10 {  
  .effect:hover .char#{$i} {   
    animation: rainbow 2s linear infinite;  
    animation-delay: 0.1s * $i;  
  }  
}  

$base2:#7E00FF; 
@keyframes rainbow {  
  @for $i from 0 through 10 {  
    #{$i* 10%}  {@include text3d(adjust-hue($base2, $i *36deg), 1, 1, 3,.1); }  
  }  
}

 

转载于:https://www.cnblogs.com/yxrs/p/8892090.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值