<div id="readability-page-1" class="page"><div>
                <div id="SE-8e1ae736-3f91-4c5d-a834-0a6e1f643870">
                            <blockquote>
                                <div><p id="SE-f73ea8c0-cc1b-49c1-9348-48c9bec590a5"><span id="SE-290b9f7f-e116-4070-bcc9-2320d91b70da">[Web] Pure CSS Icon Effect</span></p><p id="SE-820a352e-22b9-499a-88ba-477647d7ef92"><span id="SE-f56101be-2b66-4349-bc22-2ec5f3e0e4f1">- Location Pointer Animation</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-caec0f62-13c1-4ddc-94c3-16bca5cbbf48">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-caec0f62-13c1-4ddc-94c3-16bca5cbbf48&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTVfNDUg/MDAxNjAyNzMyMDc2NDcy.--EHTXCAHCABhx-EdPQhKcJy4wVQh6yqw54op2uyADkg.PjvzRgn7Dx0J2w8ZHEKYgXVXTkUdu60mfy_n0WpVAmAg.GIF.backsajang420/location-pointer-animation.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTVfNDUg/MDAxNjAyNzMyMDc2NDcy.--EHTXCAHCABhx-EdPQhKcJy4wVQh6yqw54op2uyADkg.PjvzRgn7Dx0J2w8ZHEKYgXVXTkUdu60mfy_n0WpVAmAg.GIF.backsajang420/location-pointer-animation.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTVfNDUg/MDAxNjAyNzMyMDc2NDcy.--EHTXCAHCABhx-EdPQhKcJy4wVQh6yqw54op2uyADkg.PjvzRgn7Dx0J2w8ZHEKYgXVXTkUdu60mfy_n0WpVAmAg.GIF.backsajang420/location-pointer-animation.gif?type=w800" data-width="605" data-height="401" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-ceac5b94-d961-4405-a701-7f33f0a40d47">
                                    <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;Location Pointer Animation&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;span class="pointer"&gt;&lt;/span&gt;
        &lt;span class="pulse"&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</p>
                                </div>                                <div id="SE-5a0092b2-90bc-4af1-be5a-2367b2600223">
                                    <p>body {
  margin: 0;
  padding: 0;
  background-image: url(bg.png);
}

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

.pointer {
  display: block;
  width: 100px;
  height: 100px;
  background: #ff0d43;
  border-radius: 50%;
  border-bottom-right-radius: 0;
  transform: rotate(45deg);
}
.pointer:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0.5);
  box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.4);
}

.pulse {
  position: absolute;
  display: block;
  bottom: -30px;
  left: 30px;
  width: 40px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  z-index: -1;
}
.pulse:before {
  content: "";
  position: absolute;
  top: -1.3px;
  left: -1.3px;
  width: calc(100% - 1.3px);
  height: calc(100% - 1.3px);
  background: transparent;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  z-index: -2;
  animation: animate 1s linear infinite;
  opacity: 0;
}

@keyframes animate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

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

[Web] Pure CSS Icon Effect - Location Pointer Animation

댓글