Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created May 31, 2018
Embed
What would you like to do?
Only CSS: Text Scratch
// Please typing your favorite word!
- var $text = "FALL IN LOVE"
#ui
- for (i = 0; i < 40; i++)
.text
.text_inner1
.text_inner2 #{$text}
// Please change your favorite font-size!
$fontSize: 8rem;
body {
background: rgba(25, 10, 15, 1);
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#ui {
transform: rotateZ(-4deg);
.text {
position: absolute;
font-size: $fontSize;
color: #fff;
line-height: $fontSize;
font-family: 'Anton', sans-serif;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
letter-spacing: 1rem;
overflow: hidden;
@for $i from 0 through 40 {
$key: $i + 1;
&:nth-child(#{$key}) {
$row: floor($i / 20);
color: rgba(random(200) + 55, 40, random(200) + 55, 1);
clip-path: polygon(
$i * 5% - $row * 100% - random(2) $row * 50% - random(5),
$key * 5% - $row * 100% + random(5) $row * 50% - random(30),
$key * 5% - $row * 100% + random(5) $row * 50% + 50% + random(5),
$i * 5% - $row * 100% - random(2) $row * 50% + 50% + random(30)
);
filter: blur(#{random(20) - 10}px);
.text_inner1 {
animation: vertical random(1000) + 700ms random(100) + 0ms ease-in-out infinite alternate;
}
.text_inner2 {
animation: horizontal random(1000) + 700ms random(100) + 0ms ease-in-out infinite alternate;
}
}
}
}
}
@keyframes horizontal {
0% {
transform: translateX(6px);
}
100% {
transform: translateX(-6px);
}
}
@keyframes vertical {
0% {
transform: translateY(3px);
}
100% {
transform: translateY(-3px);
}
}
<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