Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.pug

Last active May 17, 2020
Embed
What would you like to do?
Only CSS: Text Slicer Gradient
// Please typing your favorite word!
- var $text = "HAPPY HALLOWEEN :)"
#ui
- for (i = 0; i < 40; i++)
.text #{$text}
// Please change your favorite font-size!
$fontSize: 8rem;
body {
background: rgba(20, 5, 5, 1);
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
perspective: 800px;
}
#ui {
.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;
@for $i from 0 through 100 {
$key: $i + 1;
&:nth-child(#{$key}) {
$row: floor($i / 20);
color: rgba(255 - $key * 2, 50 - $key / 2, $key * 3, 1);
clip-path: polygon(
floor($i / 2) * 10% - $row * 100% $row * 50%,
floor($key / 2) * 10% - $row * 100% ceil($key % 2) * 50% + ($row * 50%),
ceil($key / 2) * 10% - $row * 100% ($row + 1) * 50%
);
transform-origin: random(100) - 50 + floor($i / 2) * 10% - $row * 100% random(100) - 50 + $row * 50%;
animation: fly#{$key} 5000ms $i * 40ms cubic-bezier(0.360, 0.100, 0.160, 1.000) infinite alternate;
@keyframes fly#{$key} {
$initX: random(1000) - 500;
$initY: random(1000) - 500;
$initZ: random(1000) - 500;
$initDepth: random(3000) - 2500;
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(#{$initX}deg) rotateY(#{$initY}deg) rotateZ(#{$initZ}deg) translateZ(#{$initDepth}px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(#{$initX}deg) rotateY(#{$initY}deg) rotateZ(#{$initZ}deg) translateZ(#{$initDepth}px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
}
}
}
}
<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
You can’t perform that action at this time.