LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

HTML/CSS + Psuedo Elements

1

SVG - Percentages

2

SVG - Absolute Values

3
CSS
body {
  font-family: Helvetica;
  background-color: #2d3f49;
  color: white;
}

.wrap {
  margin: 2rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.numbered-dot {
  margin: 3rem;
}

/* ------- default properties -------- */
.numbered-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 5.3571428571px solid #ff5050;
  color: #ff5050;
  font-size: 52.5px;
  height: 75px;
  width: 75px;
  text-align: center;
  position: relative;
}
.numbered-dot.animate:before, .numbered-dot.animate:after {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 75px;
  height: 75px;
  content: "";
  border: 5.3571428571px solid #ff5050;
  border-radius: 50%;
}
.numbered-dot.animate:before {
  animation: pulse 1.5s infinite alternate;
}
.numbered-dot.animate:after {
  animation: pulse2 3s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0.3;
  }
}
@keyframes pulse2 {
  0% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/* ~~~~~~~~~~~ SVG ~~~~~~~~~~~ */
svg {
  text-anchor: middle;
}
svg #p1 {
  transform-origin: 50% 50%;
  animation: svgpulse 1.5s infinite alternate;
}
svg #p2 {
  transform-origin: 50% 50%;
  animation: svgpulse2 3s infinite;
}

@keyframes svgpulse {
  0% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.3;
    transform: scale(1.2);
  }
}
@keyframes svgpulse2 {
  0% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv