用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 * 1、饱和度和明度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效果