<div id="readability-page-1" class="page"><div>
                <div id="SE-48ac43e8-bd83-4497-b9ad-a5d236b28e4d">
                            <blockquote>
                                <div><p id="SE-fa4bb2cc-e1bd-4045-9143-3568935be0da"><span id="SE-6280e1b4-b6f2-4cc6-9c03-813aa27f4473">[Web] Pure CSS Text Effect </span></p><p id="SE-a09d99ff-4eb4-45a3-9ef4-0aae3b714d37"><span id="SE-ecc7ad84-5d3f-4afc-91b0-aa73df8cca27">- Wave Motion Text</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-31cc35b0-1833-4998-b0cf-f8e2857f5a7f">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-31cc35b0-1833-4998-b0cf-f8e2857f5a7f&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDExMDdfMjE1/MDAxNjA0NzQzMTcxOTQ5.Np4fxyi5W20f5ttsB4TbNhFbBwSz2jsntWMaBkIKEc0g.sZhMXQm2k6ZOwF-NXuYBBwl6vg3W7O1VTB3evhylL4Mg.GIF.backsajang420/wave-motion-text.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMDdfMjE1/MDAxNjA0NzQzMTcxOTQ5.Np4fxyi5W20f5ttsB4TbNhFbBwSz2jsntWMaBkIKEc0g.sZhMXQm2k6ZOwF-NXuYBBwl6vg3W7O1VTB3evhylL4Mg.GIF.backsajang420/wave-motion-text.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMDdfMjE1/MDAxNjA0NzQzMTcxOTQ5.Np4fxyi5W20f5ttsB4TbNhFbBwSz2jsntWMaBkIKEc0g.sZhMXQm2k6ZOwF-NXuYBBwl6vg3W7O1VTB3evhylL4Mg.GIF.backsajang420/wave-motion-text.gif?type=w800" data-width="500" data-height="355" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-c5ee941f-dbe6-4fd8-aa3e-e910c61754a8">
                                    <p>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Wave Motion Text&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;
        &lt;span&gt;
            YAY
            &lt;div class="stars"&gt;
                &lt;div class="star text1"&gt;&lt;/div&gt;
                &lt;div class="star text2"&gt;&lt;/div&gt;
                &lt;div class="star text3"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/span&gt;
        &lt;span&gt;YAY&lt;/span&gt;
        &lt;span&gt;YAY&lt;/span&gt;
        &lt;span&gt;YAY&lt;/span&gt;
        &lt;span&gt;YAY&lt;/span&gt;
        &lt;span&gt;YAY&lt;/span&gt;
        &lt;span&gt;YAY&lt;/span&gt;
        &lt;span&gt;YAY&lt;/span&gt;
    &lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</p>
                                </div>                                <div id="SE-694a85da-be68-4a6f-9e22-4847a0351a8c">
                                    <p>@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@700&amp;display=swap");

body {
  margin: 0;
  padding: 0;
  background: #b0b5c7;
}

h1 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 span {
  position: absolute;
  color: #fff;
  padding: 5px;
  font-size: 5em;
  font-family: "Oswald", sans-serif;
  letter-spacing: -40px;
  -webkit-text-stroke: 1px #000;
  animation: animate 2s ease-in-out infinite;
  transform-origin: bottom left;
}

@keyframes animate {
  0% {
    transform: translate(5px, 0px) scaleY(1);
  }

  20% {
    transform: translate(5px, 29px) scaleY(1.5);
  }

  40% {
    transform: translate(5px, 0px) scaleY(1);
  }

  80% {
    transform: translate(5px, 0px) scaleY(1);
  }

  100% {
    transform: translate(5px, 0px) scaleY(1);
  }
}
h1 span:nth-child(1) {
  animation-delay: 0.1s;
  left: 45%;
  z-index: 8;
}
h1 span:nth-child(2) {
  animation-delay: 0.1s;
  color: #000;
  left: 45.5%;
  z-index: 7;
}
h1 span:nth-child(3) {
  animation-delay: 0.15s;
  transform: translateX(2px);
  color: #ff2300;
  left: 45.9%;
  z-index: 6;
}
h1 span:nth-child(4) {
  animation-delay: 0.2s;
  transform: translateX(4px);
  color: #ff8800;
  left: 46.3%;
  z-index: 5;
}
h1 span:nth-child(5) {
  animation-delay: 0.25s;
  transform: translateX(6px);
  color: #cc00ff;
  left: 46.7%;
  z-index: 4;
}
h1 span:nth-child(6) {
  animation-delay: 0.3s;
  transform: translateX(8px);
  color: #0084ff;
  left: 47.1%;
  z-index: 3;
}
h1 span:nth-child(7) {
  animation-delay: 0.35s;
  transform: translateX(10px);
  color: #00ff6a;
  left: 47.5%;
  z-index: 2;
}
h1 span:nth-child(8) {
  animation-delay: 0.4s;
  transform: translateX(12px);
  color: #eeff00;
  left: 47.9%;
  z-index: 1;
}
.stars {
  position: relative;
  width: 100%;
  z-index: 100;
}
.star {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid #000;
  background: #fff;
  animation: star 2s ease-in-out infinite;
  animation-delay: 1.1s;
  transform: rotate(0deg) scale(0);
  z-index: 100;
}
.star.text1 {
  top: -167px;
  left: 10px;
}
.star.text2 {
  top: -115px;
  left: 92px;
}
.star.text3 {
  top: -57px;
  left: 164px;
}

@keyframes star {
  0% {
    transform: rotate(0deg) scale(0);
  }
  20% {
    transform: rotate(180deg) scale(1);
  }
  40% {
    transform: rotate(0deg) scale(0);
  }
  80% {
    transform: rotate(0deg) scale(0);
  }
  100% {
    transform: rotate(0deg) scale(0);
  }
}</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

[Web] Pure CSS Text Effect - Wave Motion Text index.html style.css [reperence] - Instagram[matvoyce] [github] - https://github.com/Dev-JeromeBaek/awesome-web-styling

[Web] Pure CSS Text Effect - Wave Motion Text

댓글