Only CSS: Text Wave

index.pug

// Please typing your favorite word!
- var $text = "ocean"



#ui
  - for (i = 0; i < 26; i++)
    .text #{$text}

only-css-text-wave.markdown

Only CSS: Text Wave

Please typing your favorite word :)

A Pen by Yusuke Nakaya on CodePen.

License.

style.scss

// 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);
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" />