用Sass建立MetaFizzy效果

来源：GBin1.com

Hugo发现了一个绚丽的css效果应用于web中并教会你如何聪明的重建和使用它。两天前，我看见笔者Hugo在css帮助下重写MetaFizzy的效果，Hugo帮助咱们找到了一个用于理解Sass的JavaScript源代码。但我认为他的代码仍有可改之处，它比原版本的css多出了许多重复代码，咱们找到了一种方法使其更加效率。重点：这是一个实验，若是你想要实验，请使用JavaScript。css版本须要500个线程，占用不少的CPU。因此这是一个Sass实验，只是为了好玩。

你从哪儿开始

对 于这个问题若是一开始没有Hugo的Demo我还不知道从哪儿开始。如下是咱们须要作的。给咱们的文本一个长长的影子，渐变到黑色。岁颜色的阴影随着时间 的变化盘旋，快速的彩虹动画，最后咱们须要作如下几点，一个动画光影，一个动画鼠标悬停，一个列表的颜色鼠标悬停差很少就是这样。

平滑阴影

数据帧

咱们会作简单的光影效果，咱们作的是让文本阴影颜色逐渐变黑。而后咱们须要一个动画，随着时间改变颜色，这个效果须要hsl().由于咱们但愿Sass代码成为可能。咱们将使用一个叫作mixin的关键帧在处理这些文本阴影。首先，纲要。

@mixin text-3d($hue) {
  /* Output crazy text-shadows */
}

@keyframes text-3d-animation {
  @for $i from 0 through 10 {
    #{$i * 10%} {
      @include text-3d($i * 36);        
    }
  }
}

咱们所作的就是建立一个text-3d-animation CSS动画与11个明确关键帧(0%,10%,……90%,100%)。在每个关键帧,咱们调用一个名为text-3d mixin,传递我* 36色相参数(36,72,108,144,156,…)。若是您熟悉hsl()符号,你应该能看到事情会怎样进展。

混合

如今咱们已经建立了动画调用mixin,是时候去构建混合!但愿输出一串文本阴影。我以为50是至关巨大的了,可是你能够选择你要的号码(虽然你不得不硬编码这个,我没有定义一个参数)。再一次,咱们不会手动写阴影;Sass列表和循环都能实现。

@mixin text-3d($hue) {
  $ts: ();
  @for $i from 1 through 50 {
    $ts: $ts, $i*2px $i*2px hsl($hue + $i*1, 100%, 50% - $i);            
  }
  text-shadow: $ts, 0 0 50px, 0 0 55px;
}

别惶恐不安呢!这其实是简单的。在进入咱们的循环,咱们定义一个空列表名为$ts(表明区分开)。而后咱们进入循环。在每次运行, 咱们添加一个新的阴影到咱们的列表:两个水平和垂直偏移量设置为$ i * 2 px把阴影愈来愈大咱们没有定义任何模糊,可是你能够设置一个，你喜欢颜色是定义在HSL与色调，为给定的参数(多个36)+ $ i * 一、饱和度和明度100%到50%,这意味着我逐步去黑而后一旦循环终于结束了,咱们简单地输出咱们列表做为一个列表做为文本阴影。咱们还添加两个阴影手 动为酷白光环。咱们作的非盘旋MetaFizzy效应!它应该让工做更有魅力。

炫丽的彩虹

在大多数状况下,悬停动画做品同样是非盘旋动画。咱们将继续咱们以前作的,从关键帧开始。

关键帧

@keyframes crazy-rainbow-animation {      
    @for $i from 1 through 50 {
      #{$i * 2%} {
        @include crazy-rainbow($i, tomato yellow green blue purple);
      }
    }
  }

正如您能够看到的,几乎与上面相似咱们使用3d文字动画，除了咱们不会使用的11关键帧除了50。其实若是咱们但愿阻止51,让咱们添加0%的关键帧(循环固然)。

@keyframes crazy-rainbow-animation {      
  0% {
    @include crazy-rainbow(50, tomato yellow green blue purple);
  }
  @for $i from 1 through 50 {
    #{$i * 2%} {
      @include crazy-rainbow($i, tomato yellow green blue purple);
    }
  }
}

咱们经过咱们的疯狂彩虹mixin两个参数:

1. $i再次做为一个数字值(咱们将会看到这一点后)
2. 列表的颜色咱们想看到悬停文本移动(这是正确的,咱们能够定制颜色!)

力学

事情变得复杂。徘徊的动画基本上看起来像一个条纹阴影(没有意义了):一种颜色,而后另外一个,而后另外一个颜色,等等……可是太多，如同颜色在移动。

这个想法是这样的:

@keyframes crazy-rainbow-animation {
  0% {
    text-shadow: 2px 2px   color1, 4px 4px   color1, 6px 6px   color1, 8px 8px   color1,
                 10px 10px color2, 12px 12px color2, 14px 14px color2, 16px 16px color2,
                 18px 18px color3, 20px 20px color3, 22px 22px color3, 24px 24px color3;
  }

  2% {
    text-shadow: 2px 2px   color3, 4px 4px   color1, 6px 6px   color1, 8px 8px   color1,
                 10px 10px color1, 12px 12px color2, 14px 14px color2, 16px 16px color2,
                 18px 18px color2, 20px 20px color3, 22px 22px color3, 24px 24px color3;
  }
  
  /* And so on... */
}

在每个新的关键帧、颜色(不偏移)必须是1列表中的索引。最后的颜色列表出如今第一,每个颜色被选到正确的位置。因此到最后,咱们有相同数量的阴影与相同的偏移量除了他们的颜色变化。

构建颜色数组

正由于如此,咱们须要一个颜色列表只要数量的阴影是咱们想输出的。若是咱们想使用50的影子,咱们须要一份列表列出50个颜色。手动建立该列表是很痛苦的, 因此咱们建立一个函数来实现。这个功能的目的是将一个列表的颜色映射一个列表的颜色。但返回的列表应该匹配咱们想要的长度,因此咱们能够把列表5颜色转为 50的列表，像这样:

$given-colors: tomato yellow green blue purple;
$returned-colors: create-list($colors);
/*
$returned-colors: tomato, tomato, tomato, tomato, tomato, tomato, tomato, tomato, tomato, tomato,
                  yellow, yellow, yellow, yellow, yellow, yellow, yellow, yellow, yellow, yellow, 
                  green, green, green, green, green, green, green, green, green, green, 
                  blue, blue, blue, blue, blue, blue, blue, blue, blue, blue, 
                  purple, purple, purple, purple, purple, purple, purple, purple, purple, purple;
*/

不幸的是,我意识到50阴影对于这个动画并不老是一个好的号码。这让我想起了颜色的数量取决于你想要的,动画可能不是很好,有时颜色仅仅完成“跳越”。这是由于咱们须要阴影从最后一个关键帧匹配到第一个阴影。

总之,咱们须要找到一个号码是：

• 小于或等于50(关键帧的数量)
• 一个多种长度的颜色列表(使动画循环没有任何跳越)
• 尽量的接近50(使动画尽可能流畅,)

咱们有6种元素的列表,该函数应该返回8(由于9会超过50自从9 * 6 = 54)。一个列表的元素应该返回7 7(由于7 * 7 = 49)。

@function define-max($n) {
  @for $i from 1 through 50 {
    @if $i * $n > 50 {
      @return $i - 1;
    }
  }
}

如今回到 create-list()函数。咱们有一个列表的几个颜色,想把它变成一个列表大约50个颜色

@function create-list($colors) {
  $max: define-max( length($colors) );
  $l: ();
  @each $c in $colors {
    @for $i from 1 through $max {
      $l: append($l, $c);
    }
  }
  @return $l;
}

混合

因此咱们建立一个函数来将一个列表的颜色变成一个更长的列表的颜色。让咱们深刻研究混合。

@mixin crazy-rainbow($n, $colors) {
  $colors: create-list($colors);
  $ts: (); 
      
  @for $i from 1 through length($colors) {
    $n: if($n > length($colors) or $n == 0, 1, $n);
        
    $ts: $ts, $i*2px $i*2px 0 nth($colors, $n);
        
    $n: $n + 1;
  }
      
  text-shadow: $ts;
}

与前面相同，我定义一个$ts空列表来存储前面的映射，而后咱们进入循环添加映射到$ts列表的指针索引（$n:$n+1）。若是超出索引范围，返回1。这是它的工做原理，接下来让咱们总结一下咱们作了什么：

1. 咱们计算了映射的数量（x），咱们须要输出咱们想要运行的基本颜色。这只是没有任何故障的让动画循环。
2. 咱们生成了包含X总颜色的巨大数组，根据咱们以前计算的数量和颜色运行。
3. 每一个关键帧咱们从不一样的索引数组中实时输出X的映射，让色彩产生运动的效果。

改善位

既然咱们已经完成了全部的力学,咱们能够改进一点。为何不作一个metafizzy mixin分配几个样式?

@mixin metafizzy($size, $duration: 10s) {
  font-family: 'MetafizzyLogoRegular', cursive;
  color: white;
  line-height: .9em;
  font-weight: normal;
  font-size: $size;
  animation: text-3d-animation $duration linear infinite;  
  
  &:hover {
    animation: crazy-rainbow-animation 1s linear infinite; 
    animation-direction: reverse; 
  }
}

这个mixin定义全部排版的东西,包括字体组(你须要的字体文件),字体大小,字体粗细,行高等等。让咱们继续前进。如何生成混合两个关键帧动画?咱们能够经过它颜色列表编辑咱们想使用在盘旋效果。

@mixin metafizzy-animations($hover-colors) {
  @keyframes text-3d {
    @for $i from 0 through 10 {
      #{$i*10%} {
        @include text-3d($i * 36); 
      }
    }
  }  

  @keyframes crazy-rainbow {      
    @for $i from 1 through 50 {
      0% { 
       @include crazy-rainbow(50, $hover-colors); 
      } 
      #{$i*2%} {
       @include crazy-rainbow($i, $hover-colors);
      }
    }
  }
}

不幸的是,咱们不能够包括这个mixin的metafizzy一由于后者包含在一个选择器(如h1)。实际上咱们能够作到,但这行不 通;@keyframes动画将被内部输出儿不是在根文件下。在Sass 3.3,咱们将有@at-root指令,会让这种事情(@directive冒泡)变成可能,可是如今,这是不可能的。因此咱们必须包括在根目录下。

使用&演示

@include metafizzy-animations(red orangered yellow lightgreen green deepskyblue);

h1 {
  @include metafizzy(25em, 5s);  
  /* Other styles that please you */   
}

这是咱们所获得的，但愿你喜欢它，欢迎阅读。

via 极客标签

来源：用Sass建立MetaFizzy效果