<div id="readability-page-1" class="page"><div>
                <div id="SE-35f995a5-27ed-4ae7-aeab-ef175ea1e18d">
                            <blockquote>
                                <div><p id="SE-60c71eb4-665a-4b2e-815f-646cf9d73155"><span id="SE-a9bad820-ae17-4713-94c3-954a8633a32b">[Web] Pure CSS Text Effect </span></p><p id="SE-86c1939d-6035-4d46-aa02-e5391ef7f2f1"><span id="SE-f3d5ff08-1838-464f-937e-45894774aaa8">- Ghost Text Animation Effects</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-aa2d7fbe-63e6-451f-b239-ef1071abb6c9">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-aa2d7fbe-63e6-451f-b239-ef1071abb6c9&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTNfNzQg/MDAxNjAyNTYzMjIyMjE4.p72k5oKqmocn4D-yWKq0rp067v_BSYKf--i9WoO8mVsg.hF2DPUesLFecdiUjm2KeQ75ML4zee6Qdl7N6ggMTWIQg.GIF.backsajang420/ghost-text-animation.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTNfNzQg/MDAxNjAyNTYzMjIyMjE4.p72k5oKqmocn4D-yWKq0rp067v_BSYKf--i9WoO8mVsg.hF2DPUesLFecdiUjm2KeQ75ML4zee6Qdl7N6ggMTWIQg.GIF.backsajang420/ghost-text-animation.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTNfNzQg/MDAxNjAyNTYzMjIyMjE4.p72k5oKqmocn4D-yWKq0rp067v_BSYKf--i9WoO8mVsg.hF2DPUesLFecdiUjm2KeQ75ML4zee6Qdl7N6ggMTWIQg.GIF.backsajang420/ghost-text-animation.gif?type=w800" data-width="605" data-height="401" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-2b6fbe3e-4ac6-4ad1-873c-e3d75797b4bf">
                                    <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;title&gt;Ghost Text Animation&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;section&gt;
        &lt;h2&gt;
            &lt;span&gt;G&lt;/span&gt;
            &lt;span&gt;h&lt;/span&gt;
            &lt;span&gt;o&lt;/span&gt;
            &lt;span&gt;s&lt;/span&gt;
            &lt;span&gt;t&amp;nbsp&amp;nbsp&lt;/span&gt;
            &lt;span&gt;T&lt;/span&gt;
            &lt;span&gt;e&lt;/span&gt;
            &lt;span&gt;x&lt;/span&gt;
            &lt;span&gt;t&lt;/span&gt;
        &lt;/h2&gt;
    &lt;/section&gt;
&lt;/body&gt;

&lt;/html&gt;</p>
                                </div>                                <div id="SE-6ece53cc-b59c-4fe8-9ae0-ac3a378aa750">
                                    <p>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&amp;display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #111111;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

h2 {
  font-size: 10em;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  display: flex;
}

h2 span {
  transition: 1.5s;
}

h2:hover span {
  filter: blur(20px);
  opacity: 0;
  transform: scale(2);
}

h2 span:nth-child(10n + 1) {
  transition-delay: 0s;
}
h2 span:nth-child(10n + 2) {
  transition-delay: 0.1s;
}
h2 span:nth-child(10n + 3) {
  transition-delay: 0.2s;
}
h2 span:nth-child(10n + 4) {
  transition-delay: 0.3s;
}
h2 span:nth-child(10n + 5) {
  transition-delay: 0.4s;
}
h2 span:nth-child(10n + 6) {
  transition-delay: 0.5s;
}
h2 span:nth-child(10n + 7) {
  transition-delay: 0.6s;
}
h2 span:nth-child(10n + 8) {
  transition-delay: 0.7s;
}
h2 span:nth-child(10n + 9) {
  transition-delay: 0.8s;
}
h2 span:nth-child(10n + 10) {
  transition-delay: 0.9s;
}</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

[Web] Pure CSS Text Effect - Ghost Text Animation Effects index.html style.css [reperence] - Online Tutorials [github] - https://github.com/Dev-JeromeBaek/awesome-web-styling

[Web] Pure CSS Text Effect - Ghost Text Animation Effects

댓글