スクロールダウン – 002

プレビュー

別タブで表示する

コードの紹介

html

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

CSS

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

.cScrollDown::before {
  background: #f3f3f3;
}

.cScrollDown::after {
  background: #333;
  animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}