用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效果