Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.pug
Created Jul 10, 2018

Embed
What would you like to do?
Only CSS: Text Wave
// Please typing your favorite word!
- var $text = "ocean"
#ui
- for (i = 0; i < 26; i++)
.text #{$text}
// Please change your favorite font-size!
$fontSize: 10rem;
body {
background: rgba(10, 20, 40, 1);
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
perspective: 500px;
}
div {
will-change: transform;
}
#ui {
transform-style: preserve-3d;
.text {
position: absolute;
font-size: $fontSize;
color: #fff;
line-height: $fontSize;
font-family: 'Anton', sans-serif;
padding: 20px 0;
mix-blend-mode: screen;
transform-style: preserve-3d;
@for $i from 1 through 26 {
$key: $i - 1;
$param: 5;
&:nth-child(#{$i}) {
clip-path: polygon(
-30% + ($key * $param) 0,
-20% + ($key * $param) 0,
20% + ($key * $param) 100%,
0% + ($key * $param) 100%
);
animation: wave 2000ms $key * 200 - 10000ms ease-in-out infinite alternate;
}
}
}
}
@keyframes wave {
0% {
transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg);
color: rgba(0, 30, 100, 1);
}
100% {
transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg);
color: rgba(50, 230, 255, 1);
}
}
<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.