スクロールダウン – 003

プレビュー

コードの紹介

html

<div class="cScrollDown"></div>

CSS

.cScrollDown {
  width: 2px;
  height: 60px;
  position: relative;
}
.cScrollDown::before,
.cScrollDown::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.cScrollDown::before {
  background: #f3f3f3;
  width: 100%;
  height: 100%;
}

.cScrollDown::after {
  background: #333;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
  0% {
    transform: translateX(-50%) scale(0);
    top: 0;
  }
  15% {
    transform: translateX(-50%) scale(0);
    top: 0;
  }
  90% {
    transform: translateX(-50%) scale(1);
    top: 100%;
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    top: 100%;
    opacity: 0;
  }
}