Konfeti Efekti Html

23.10.2017 11:55

WhiteRed WM Aracı Kullanıcı

Üyelik 26.03.2016
Yaş/Cinsiyet 29 / E
Meslek Öğrenci
Konum İstanbul Avrupa

Ad Soyad A** K**
Mesajlar 381
Beğeniler 85 / 44
Ticaret 0, (%0)

Arkadaşlar kar efekti gibi konfeti efekti arıyorum html şeklinde elinizde varmı acaba konfeti olmasada renkli renkli aşşağıya inen küçük küçük çubuklar da olur

23.10.2017 11:59

#2

Freelance Biz Ancak Rükuda Eğiliriz Kullanıcı

Üyelik 12.03.2016
Yaş/Cinsiyet 26 / E
Meslek Freelance, Webmaster
Konum İstanbul Avrupa

Ad Soyad M** A**
Mesajlar 331
Beğeniler 131 / 97
Ticaret 9, (%100)

Şampanya patlatmada varsa bende alayım :D

23.10.2017 12:44

#3

emreyvz .NET Core & Angular & PHP Kullanıcı

Üyelik 19.04.2016
Yaş/Cinsiyet 29 / E
Meslek Bilgisayar Mühendisi
Konum İstanbul Anadolu

Ad Soyad E** Y**
Mesajlar 691
Beğeniler 110 / 250
Ticaret 24, (%100)

HTML:

CSS:



/*
*
* My attempt at confetti, not sure of any other way to make it more random (on load etc) 
*
*/

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.conf-cont{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.confetti{
  position:absolute;
  width:12px;
  height:12px;
  background-color:#f00;
  opacity:0.0;
  
  animation-name: fallsway;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
    
  @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        z-index: $i;
        animation-name: fallsway#{$i};
        animation-delay: (4 / 20) * $i + s;
        background-color:rgb(random(255),random(255),random(255));
      }
    }
}

@for $i from 1 through 20 {
  @keyframes fallsway#{$i} {
  0%{
    top:-5%;    
    left:0%+random(95);
    opacity:1.0;
    transform:skew(-30deg);
  }
  25%{
    left:100%-random(105);
    transform:skew(30deg);
  }
  50%{
    left:0%+random(95);
    transform:skew(-30deg);
  }
  75%{
    left:100%-random(105);
    transform:skew(30deg);
  }
  100% {
    top:100%;
    left:0%+random(95);
    opacity:1.0;
    transform:skew(-30deg);
  }
}  
}

@keyframes fallsway {
  0%{
    top:-10%;    
    left:0%+random(95);
    opacity:1.0;
  }
  25%{
    left:0%+random(95);
  }
  50%{
    left:0%+random(95);
  }
  75%{
    left:0%+random(95);  
  }
  100% {
    top:110%;
    left:0%+random(95);
    opacity:1.0;
  }
}

ÖNİZLEME:

https://codepen.io/Event_Horizon/pen/wBKVQN#result-box

31.12.2021 03:03

#4

aslandag WM Aracı Kullanıcı

Üyelik 06.03.2017
Yaş/Cinsiyet 44 / E
Meslek Bilgisayar
Konum Almanya

Ad Soyad F** A**
Mesajlar 29
Beğeniler 1 / 2
Ticaret 0, (%0)

bunu kendi style.css dosyamami ekleyecegim acaba yoksa baska bir style.css dosyasimi yapmam gerek ?

Konfeti Efekti Html

Üye Girişi Yap