Hepimizin bildiği parallax tarzı web sayfalarının ilk ana sayfası, ekranı kaplamış olarak bulunan hero resmidir. Bu resmin ortasında site ile ilgili bir cümlelik h1 takısı ile yazılmış olan bir açıklama yazısı vardır. Kullanıcıya buradan sonra hareketli bir ok ya da fare işareti ile aşağı doğru sayfayı kaydırmasını söyleyeceğimiz bir sembol koymak isteriz.

İşte bu işi yapabilmek için küçük bir css kod parçası:

CSS:

.mouse{
  margin: 50px auto;
  width: 100px;
}.mouse-icon{
   width: 25px;
   height: 45px;
   border: 2px solid white;
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}.mouse-wheel{
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white;
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}@-moz-keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}@keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}

HTML:

<div class="mouse">

  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>

</div>

• mouse scroll icon
• css