zoukankan      html  css  js  c++  java
  • 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); }  
      }  
    }
  • 相关阅读:
    MySQL8.0设置远程访问权限
    MySQL创建用户与授权
    input lable水平对齐
    jquery datagrid加载后仅选定第一行
    jquery隐藏按钮
    C# 添加excel批注
    在ashx中使用Server对象
    jquery 获取datagrid行数
    弹出窗体中加载页面
    【MySQL】MySQL零碎积累
  • 原文地址:https://www.cnblogs.com/yxrs/p/8892090.html
Copyright © 2011-2022 走看看