<h1> Meta <span>Fizzy</span></h1>
@import "compass/css3";
/**
* Thanks David! ;)
*/
@font-face {
font-family: 'MetafizzyLogoRegular';
src: url('https://metafizzy.co/assets/fonts/metafizzylogo-regular.eot');
src: url('https://metafizzy.co/assets/fonts/metafizzylogo-regular.eot?#iefix') format('embedded-opentype'),
url('https://metafizzy.co/assets/fonts/metafizzylogo-regular.woff') format('woff'),
url('https://metafizzy.co/assets/fonts/metafizzylogo-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/**
* Returns the number of keyframes required based on $n (max 50)
* $n: length of colors list
* Basically: 2->50, 3->48, 4->48, 5->50, 6->48, 7->49, 8->48, 9->45, 10->50
*/
@function define-max($n) {
@for $i from 1 through 51 {
@if $i * $n > 50 {
@return $i - 1;
}
}
}
/**
* Returns a list of N values based on a list of colors
* knowing N % $colors length has to be equals to 0 (to make the loop loops)
* and N can't be greater than 50 (number of keyframes)
* $colors: list of colors to be used
*/
@function create-list($colors) {
$a: define-max( length($colors) );
$l: ();
@each $c in $colors {
@for $i from 1 through $a {
$l: append($l, $c);
}
}
@return $l;
}
/**
* Mixin outputing a crapload of text-shadows (50 actually)
* $hue: starting hue
*/
@mixin text-3d($hue: 0) {
$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;
}
/**
* Mixin outputing a crapload of text-shadows (based on given list of colors)
* Used for animated hover
* $index: index of the color list at which the first text-shadow will start
* $cols: list of colors
*/
@mixin crazy-rainbow($n, $colors) {
$ts: ();
$colors: create-list($colors);
@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;
}
/**
* Mixin to metafizzy a text
* $size: font-size used
* $duration: color-changing animation duration
*/
@mixin metafizzy($size, $duration: 20s) {
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 generating keyframes for animations
* Outputing a crapload of text shadows
*/
@mixin metafizzy-animations($hover-colors) {
/**
* Rainbow animation, changing color smoothly
*/
@keyframes text-3d-animation {
@for $i from 0 through 10 {
#{$i*10%} {
@include text-3d($i * 36);
}
}
}
/**
* Hover epiphany
*/
@keyframes crazy-rainbow-animation {
0% {
@include crazy-rainbow(50, $hover-colors);
}
@for $i from 1 through 50 {
#{$i*2%} {
@include crazy-rainbow($i, $hover-colors);
}
}
}
}
body {
background: black;
overflow: hidden;
}
/**
* Until @at-root (Sass 3.3), we have to call this outside h1
* Actually @keyframes bubbling would work too.
*/
@include metafizzy-animations(red orangered gold lightgreen green deepskyblue);
h1 {
margin: .1em;
@include metafizzy(25em, 5s);
}
View Compiled
// A SCSS verions of David DeSandro's Meta Fizzy https://metafizzy.co/
This Pen doesn't use any external CSS resources.