<div id="readability-page-1" class="page"><div>
                <div id="SE-f1577695-9607-4107-a177-02062fa311b4">
                            <blockquote>
                                <div><p id="SE-5c0871f6-4e1e-45f3-a8c0-5b6b3f39de73"><span id="SE-9051312a-291a-4a58-aa67-5901cbac391a">[Web] Ui Indicator Design </span></p><p id="SE-fa5f17c9-efef-487e-85bf-21070194d902"><span id="SE-8caad462-2e73-4afe-9796-615772d97894">- Mouse Scroll Down Effect</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-81ef4e3d-3ea4-4804-a5a1-d6ec88ab9b89">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-81ef4e3d-3ea4-4804-a5a1-d6ec88ab9b89&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDEwMjdfMjky/MDAxNjAzNzc3MDc4NTYw.xsrxXOVROgEWrx_rwyvvyFRn-Ef6McUeDBy5WG5PzQsg.GLkaZqAnCvTOeZmxB0ChsWP8IMsnprgYdpZ4Wa5mpUUg.GIF.backsajang420/mouse-scroll-down-effect.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMjdfMjky/MDAxNjAzNzc3MDc4NTYw.xsrxXOVROgEWrx_rwyvvyFRn-Ef6McUeDBy5WG5PzQsg.GLkaZqAnCvTOeZmxB0ChsWP8IMsnprgYdpZ4Wa5mpUUg.GIF.backsajang420/mouse-scroll-down-effect.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMjdfMjky/MDAxNjAzNzc3MDc4NTYw.xsrxXOVROgEWrx_rwyvvyFRn-Ef6McUeDBy5WG5PzQsg.GLkaZqAnCvTOeZmxB0ChsWP8IMsnprgYdpZ4Wa5mpUUg.GIF.backsajang420/mouse-scroll-down-effect.gif?type=w800" data-width="500" data-height="420" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-88b7ff58-22d0-4221-abbc-c5fc8b6cb568">
                                    <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;Mouse Scroll Down Effect&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="center"&gt;
        &lt;div class="down"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</p>
                                </div>                                <div id="SE-edb135d0-d1d4-4f77-b277-5eca97ea2d38">
                                    <p>body {
  margin: 0;
  padding: 0;
  background: #262626;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.down {
  position: relative;
  width: 50px;
  height: 80px;
  border-radius: 25px;
  background: transparent;
  border: 4px solid #fff;
  overflow: hidden;
}
.down:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  left: 50%;
  top: 10px;
  transform: translate(-50%, 0);
  animation: animate 1s linear infinite;
}
.down:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 15px;
  background: #fff;
  left: 50%;
  top: 5px;
  transform: translate(-50%, 0);
  border-radius: 3px;
}

@keyframes animate {
  0% {
    transform: translate(-50%, 20px);
  }
  80% {
    transform: translate(-50%, 50px);
  }
  100% {
    transform: translate(-50%, 60px);
  }
}</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

[Web] Ui Indicator Design - Mouse Scroll Down Effect index.html style.css [reperence] - Online Tutorials [github] - https://github.com/Dev-JeromeBaek/awesome-web-styling

[Web] Ui Indicator Design - Mouse Scroll Down Effect

댓글