Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Apr 6, 2019

Embed
What would you like to do?
SCSS Radiating Text
<h1 class="name">
Chris is the bomb
</h1>
//Inspired by Johan Fagerbeg's pen: https://codepen.io/birjolaxew/pen/EPOobx?editors=0100
$colors: red, orange, yellow, blue;
$size: 25;
@mixin rainbow-shadow($colors, $offset: 0, $size: $size) {
$len: length($colors);
$outp: 0px 0px transparent;
@for $i from 1 through $size {
$ind: floor( max($i + $offset, 1) / $size * length($colors) ) % $len + 1;
$col: nth($colors, $ind);
$outp: #{$outp}, #{$i}px #{$i}px #{$col};
}
text-shadow: $outp;
}
body { margin: 0; background: #171717; }
h1 {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
margin: -#{$size/2}px 0 0;
font-family: 'Pacifico', cursive;
font-size: 15vh;
color: white;
text-align: center;
}
.name {
animation: animated-rainbow-shadow 1s infinite;
}
@keyframes animated-rainbow-shadow {
@for $i from 0 to $size + 1 {
#{$i / $size * 100}% {
@include rainbow-shadow($colors, $i);
}
}
}
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.