Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Nov 9, 2017
Embed
What would you like to do?
Only CSS: Text Spot Light
// Please typing your favorite word!
- var $text = "MERRY CHRISTMAS"
#ui
- for (i = 0; i < 50; i++)
.text #{$text}
// Please change your favorite font-size!
$fontSize: 10rem;
body {
background: rgba(5, 10, 25, 1);
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#ui {
// transform: rotateZ(-8deg);
.text {
position: absolute;
font-size: $fontSize;
color: #fff;
line-height: $fontSize;
// opacity: 0;
font-family: 'Anton', sans-serif;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
// filter: blur(2px) contrast(5);
letter-spacing: 1rem;
@for $i from 0 through 100 {
$key: $i + 1;
&:nth-child(#{$key}) {
$row: floor($i / 20);
// color: rgba(random(155) + 100, random(155) + 100, random(55), 1);
color: rgba(random(30), random(100), random(155) + 100, 1);
animation: clip#{$i} random(10000) + 10000ms ease-in-out infinite alternate;
filter: blur(#{random(25) - 10}px);
@keyframes clip#{$i} {
0% {
clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
}
25% {
clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
}
50% {
clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
}
75% {
clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
}
100% {
clip-path: circle(random(150) + 30px at random(160) - 30% random(160) - 30%);
}
}
}
}
}
}
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment