logo DevAnswer - Developers Answer

Animated Pure Css Circular Popup

11th February

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
*,
*:after,
*:before {
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
}

body {
    position: relative;
    height: 100%;
    width: 100%;
    background: #404040;
    color: #eee;
    margin: 0;
    font-family: "Lato", "Trebuchet MS", sans-serif;
    line-height: 1.3;
    letter-spacing: 0.002em;
}

a {
    outline: none;
    text-decoration: none;
    color: #fff;
    transition: 0.2s;
}

h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #fff;
}

.back-link {
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

    .back-link:hover, .back-link:focus {
        border-color: #fff;
        color: #fff;
    }

.article__pointer {
    position: absolute;
    height: 100px;
    width: 100px;
    margin: -50px 0 0 -50px;
    display: flex;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.article__pointer_blue {
    top: 30%;
    left: 30%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    box-shadow: 0 0 0 10px #2980b9;
}

    .article__pointer_blue:hover, .article__pointer_blue:focus {
        box-shadow: 0 0 0 20px #2980b9;
    }

.article__pointer_red {
    top: 50%;
    left: 60%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    box-shadow: 0 0 0 10px #e74c3c;
}

    .article__pointer_red:hover, .article__pointer_red:focus {
        box-shadow: 0 0 0 20px #e74c3c;
    }

.article__pointer_yellow {
    top: 70%;
    left: 40%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    box-shadow: 0 0 0 10px #e67e22;
}

    .article__pointer_yellow:hover, .article__pointer_yellow:focus {
        box-shadow: 0 0 0 20px #e67e22;
    }

.article__layer {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    transform: scale(0);
    transition: 0.6s ease-in-out;
}

.article__layer_blue {
    background: #2980b9;
    box-shadow: 0 0 0 100vw #2980b9, 0 0 0 100vh #2980b9;
}

.article__layer_red {
    background: #e74c3c;
    box-shadow: 0 0 0 100vw #e74c3c, 0 0 0 100vh #e74c3c;
}

.article__layer_yellow {
    background: #e67e22;
    box-shadow: 0 0 0 100vw #e67e22, 0 0 0 100vh #e67e22;
}

.article__panel {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity, transform;
    transition: 0.2s;
}

    .article__panel:target {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        transition: 0.2s 0.4s;
    }

        .article__panel:target ~ a {
            z-index: 1;
        }

            .article__panel:target ~ a span {
                transform: scale(1);
            }

.article__panel_blue {
    background: #2980b9;
}

.article__panel_red {
    background: #e74c3c;
}

.article__panel_yellow {
    background: #e67e22;
}

.article__body {
    max-height: 100%;
    width: 100%;
    flex: 0 0 100%;
    padding: 40px 20px;
    line-height: 1.6;
    letter-spacing: 0.025em;
    color: rgba(255, 255, 255, 0.75);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.article__container {
    max-width: 600px;
    margin: auto;
}

.article__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}
</style>

</head>
<body>
<section class="article">
  <article class="article__panel article__panel_blue" id="article-blue">
    <div class="article__body">
      <div class="article__container">
        <header class="article__header">
          <h2>The Mountains</h2>
          <a role="button" href="#0" class="back-link">close</a>
        </header>
        <p>Bacon ipsum dolor amet jerky pig turducken pork belly, ham pork bresaola spare ribs short loin pork chop cupim. Venison tongue biltong ham hock t-bone cow tenderloin brisket, kevin short loin. Chuck jerky capicola pastrami short loin sausage kielbasa frankfurter pancetta tri-tip beef pork loin drumstick. Short loin burgdoggen fatback, ball tip bresaola capicola tri-tip beef sausage picanha venison. Biltong shoulder corned beef pork belly frankfurter.
        </p>
        <p>Bacon ipsum dolor amet jerky pig turducken pork belly, ham pork bresaola spare ribs short loin pork chop cupim. Venison tongue biltong ham hock t-bone cow tenderloin brisket, kevin short loin. Chuck jerky capicola pastrami short loin sausage kielbasa frankfurter pancetta tri-tip beef pork loin drumstick. Short loin burgdoggen fatback, ball tip bresaola capicola tri-tip beef sausage picanha venison. Biltong shoulder corned beef pork belly frankfurter.
        </p>
      </div>
    </div>
  </article>
  <a role="button" class="article__pointer article__pointer_blue" href="#article-blue">
    <span class="article__layer article__layer_blue" role="presentation"></span>
    The Mountains
  </a>
</section>
<section class="article">
  <article class="article__panel article__panel_red" id="article-red">
    <div class="article__body">
      <div class="article__container">
        <header class="article__header">
          <h2>City Trips</h2>
          <a role="button" href="#0" class="back-link">close</a>
        </header>
        <p>Bacon ipsum dolor amet jerky pig turducken pork belly, ham pork bresaola spare ribs short loin pork chop cupim. Venison tongue biltong ham hock t-bone cow tenderloin brisket, kevin short loin. Chuck jerky capicola pastrami short loin sausage kielbasa frankfurter pancetta tri-tip beef pork loin drumstick. Short loin burgdoggen fatback, ball tip bresaola capicola tri-tip beef sausage picanha venison. Biltong shoulder corned beef pork belly frankfurter.
        </p>
      </div>
    </div>
  </article>
  <a role="button" class="article__pointer article__pointer_red" href="#article-red">
  <span class="article__layer article__layer_red" role="presentation"></span>
    City Trips
  </a>
</section>
<section class="article">
  <article class="article__panel article__panel_yellow" id="article-yellow">
    <div class="article__body">
      <div class="article__container">
        <header class="article__header">
          <h2>Foggy Highlands</h2>
          <a role="button" href="#0" class="back-link">close</a>
        </header>
        <p>Venison tongue biltong ham hock t-bone cow tenderloin brisket, kevin short loin. Chuck jerky capicola pastrami short loin sausage kielbasa frankfurter pancetta tri-tip beef pork loin drumstick. Short loin burgdoggen fatback, ball tip bresaola capicola tri-tip beef sausage picanha venison. Biltong shoulder corned beef pork belly frankfurter.
        </p>
        <p>Bacon ipsum dolor amet jerky pig turducken pork belly, ham pork bresaola spare ribs short loin pork chop cupim. Venison tongue biltong ham hock t-bone cow tenderloin brisket, kevin short loin. Chuck jerky capicola pastrami short loin sausage kielbasa frankfurter pancetta tri-tip beef pork loin drumstick. Short loin burgdoggen fatback, ball tip bresaola capicola tri-tip beef sausage picanha venison. Biltong shoulder corned beef pork belly frankfurter.
        </p>
        <p>Bacon ipsum dolor amet jerky pig turducken pork belly, ham pork bresaola spare ribs short loin pork chop cupim. Venison tongue biltong ham hock t-bone cow tenderloin brisket, kevin short loin.
        </p>
      </div>
    </div>
  </article>
  <a role="button" class="article__pointer article__pointer_yellow" href="#article-yellow">
    <span class="article__layer article__layer_yellow" role="presentation"></span>
    Foggy Highlands
  </a>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>                        



Other Codes