<div id="readability-page-1" class="page"><div>
                <div id="SE-9094debb-a573-4610-8a96-2aac2df0d4e3">
                            <blockquote>
                                <div><p id="SE-a8b20c84-9562-4834-b5a8-e30e6cf79a53"><span id="SE-83d2fcf5-fe6f-4702-9bec-02c8e5c9aa39">[Web] Pure CSS Text Effect </span></p><p id="SE-7b86397d-0a5a-4805-949b-2e43e7d05e33"><span id="SE-ce8f6023-db67-4870-bc81-bfb49a064462">- Stretch Motion Text</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-8470b87a-2853-459a-aa97-392505941cf1">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8470b87a-2853-459a-aa97-392505941cf1&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDExMTNfOTkg/MDAxNjA1MjQ1MTQ1NDM3.lnY_Kjs3f4_MmjfanFAmebQiX9JwW5KSow6UztGzRYkg.eHPwn_5spjESfTLUWAwLjLcAO13zx9EiuauLqoRhY0Mg.GIF.backsajang420/stretch-motion-text.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMTNfOTkg/MDAxNjA1MjQ1MTQ1NDM3.lnY_Kjs3f4_MmjfanFAmebQiX9JwW5KSow6UztGzRYkg.eHPwn_5spjESfTLUWAwLjLcAO13zx9EiuauLqoRhY0Mg.GIF.backsajang420/stretch-motion-text.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMTNfOTkg/MDAxNjA1MjQ1MTQ1NDM3.lnY_Kjs3f4_MmjfanFAmebQiX9JwW5KSow6UztGzRYkg.eHPwn_5spjESfTLUWAwLjLcAO13zx9EiuauLqoRhY0Mg.GIF.backsajang420/stretch-motion-text.gif?type=w800" data-width="500" data-height="335" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-534b5ef6-353a-470f-a60a-18fdd2bdbf9a">
                                    <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;Stretch Motion Text&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div&gt;
        &lt;span&gt;WROK&lt;/span&gt;
        &lt;span&gt;WROK&lt;/span&gt;
        &lt;span&gt;WROK&lt;/span&gt;
        &lt;span&gt;WROK&lt;/span&gt;
        &lt;span&gt;WROK&lt;/span&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</p>
                                </div>                                <div id="SE-9cbca9e7-73b0-49ad-bd6d-bd694d193ebd">
                                    <p>@import url("https://fonts.googleapis.com/css2?family=Passion+One:wght@700&amp;display=swap");

body {
  margin: 0;
  padding: 0;
  background: #ecd4d4;
  font-family: "Passion One", cursive;
}

div {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  position: relative;
}

div span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 7em;
  -webkit-text-stroke: 1px #000;
  animation: animate 2.5s cubic-bezier(0.39, 0.24, 0.49, 1) infinite;
  /* transform-origin: bottom left; */
}

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

  20% {
    transform: translate(-50%, -50%) scaleY(1);
  }

  50% {
    transform: translate(-50%, -50%) scaleY(3);
  }

  80% {
    transform: translate(-50%, -50%) scaleY(1);
  }

  100% {
    transform: translate(-50%, -50%) scaleY(1);
  }
}

div span:nth-child(1) {
  animation-delay: 0.1s;
  left: 48%;
  z-index: 5;
}
div span:nth-child(2) {
  animation-delay: 0.3s;
  color: #ffc400;
  left: 49%;
  z-index: 4;
}
div span:nth-child(3) {
  animation-delay: 0.5s;
  color: #ff9100;
  z-index: 3;
}
div span:nth-child(4) {
  animation-delay: 0.7s;
  color: #fd7373;
  left: 51%;
  z-index: 2;
}
div span:nth-child(5) {
  animation-delay: 0.9s;
  color: #ff3e3e;
  left: 52%;
  z-index: 1;
}
</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

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

[Web] Pure CSS Text Effect - Stretch Motion Text

댓글