Tạo Google Map Pin với CSS3

Hôm nay mình sẽ mang đến cho các bạn một bài học đơn giản về cách tạo hiệu ứng động bằng CSS3. Qua bài viết này, mình tin chắc các bạn sẽ nắm vững được các thuộc tính như box-shadow, và sử dụng transfrom và @keyframes để tạo các hiệu ứng động mà các bạn mong muốn.

Xem Demo | Download

HTML

Để tạo hiệu ứng này, chúng ta sẽ chỉ cần 2 thẻ div như sau :

<div class='pin bounce'></div>
<div class='pulse'></div>

CSS

Và đoạn css bên dưới sẽ giúp các bạn hiểu nó được tạo hiệu ứng như thế nào.

.pin {
  awidth: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #00cae9;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin:after {
  content: "";
  awidth: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: #e6e6e6;
  position: absolute;
  border-radius: 50%;
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.pulse {
  background: #d6d4d4;
  border-radius: 50%;
  height: 14px;
  awidth: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}
.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  awidth: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  box-shadow: 0 0 1px 2px #00cae9;
  animation-delay: 1.1s;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
  }

  80% {
    transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    transform: translateY(0) rotate(-45deg);
  }
}

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster