用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兩個參數:
- $i再次作為一個數字值(我們將會看到這一點后)
- 列表的顏色我們想看到懸停文本移動(這是正確的,我們可以定制顏色!)
力學
事情變得復雜。徘徊的動畫基本上看起來像一個條紋陰影(沒有意義了):一種顏色,然后另一個,然后另一個顏色,等等……但是太多，如同顏色在移動。
這個想法是這樣的:
@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。這是它的工作原理，接下來讓我們總結一下我們做了什么：
- 我們計算了映射的數量（x），我們需要輸出我們想要運行的基本顏色。這只是沒有任何故障的讓動畫循環。
- 我們生成了包含X總顏色的巨大數組，根據我們之前計算的數量和顏色運行。
- 每個關鍵幀我們從不同的索引數組中實時輸出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 極客標簽
浙公網安備 33010602011771號