CSS ile havai fişek animasyonu yapmak

Sadece HTML ve CSS kullanarak (javascript ve jquery kullanmadan) hazırlanan bir havaifişek uygulamasını internetten incelerken üzerinde hafif değişiklikler de yaparak bir internet sitesinin yıl dönümü için kullandım.

Benzer bir uygulama arayışında olan arkadaşlar için kodları paylaşıyorum, aşağıdaki HTML ve CSS kodları ile herhangi bir eklenti ya da paket kurmadan havaifişek animasyonunu sitenize ekleyerek kullanabilirsiniz.

HTML

<div class="sayfa">
  <div class="birinci"></div>
  <div class="ikinci"></div>
</div>

 

CSS

$kivilcim: 80;
$genislik: 200;
$yukseklik: 200;

$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $kivilcim {
  $box-shadow: $box-shadow,
               random($genislik)-$genislik / 2 + px
               random($yukseklik)-$yukseklik / 1.2 + px
               hsl(random(360), 100, 50);
  $box-shadow2: $box-shadow2, 0 0 red
}
@mixin keyframes ($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }

    @-moz-keyframes #{$animationName} {
        @content;
    }

    @-o-keyframes #{$animationName} {
        @content;
    }

    @-ms-keyframes #{$animationName} {
        @content;
    }

    @keyframes #{$animationName} {
        @content;
    }
}

@mixin animation-delay ($settings) {
    -moz-animation-delay: $settings;
    -webkit-animation-delay: $settings;
    -o-animation-delay: $settings;
    -ms-animation-delay: $settings;
    animation-delay: $settings;
}

@mixin animation-duration ($settings) {
    -moz-animation-duration: $settings;
    -webkit-animation-duration: $settings;
    -o-animation-duration: $settings;
    -ms-animation-duration: $settings;
    animation-duration: $settings;
}

@mixin animation ($settings) {
    -moz-animation: $settings;
    -webkit-animation: $settings;
    -o-animation: $settings;
    -ms-animation: $settings;
    animation: $settings;
}

@mixin transform ($settings) {
    transform: $settings;
    -moz-transform: $settings;
    -webkit-transform: $settings;
    -o-transform: $settings;
    -ms-transform: $settings;
}

body {
  margin:0;
  padding:0;
  background: #000;
  overflow: hidden;
}

.sayfa > .birinci, .sayfa > .ikinci {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: $box-shadow2;
  @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
}
    
.sayfa > .after {
  @include animation-delay((1.25s, 1.25s, 1.25s));
  @include animation-duration((1.25s, 1.25s, 6.25s));
}
        
@include keyframes(bang) {
  to {
    box-shadow:$box-shadow;
  }
}
    
@include keyframes(gravity)  {
  to {
    @include transform(translateY(200px));
    opacity: 0;
  }
}
    
@include keyframes(position) {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {  
    margin-top: 20%;
    margin-left: 70%
  }
  60%, 79.9% {  
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {  
    margin-top: 30%;
    margin-left: 80%;
  }
}

 

Editör editi: sitede yer alan bazı diğer benzer başlıklar için;

bkz: Html ve Css ile bütün internet sitesini siyah beyaz yapmak

bkz: HTML ve CSS ile kayan yazı yapmak

bkz: CSS ile gradient arka plan (background) yapmak

bkz: CSS ile Display Flex içinde ortalama yapmak

bkz: CSS Flexbox order Özelliği ile Sıralama Yapmak

bkz: HTML ve CSS ile body yüksekliğini %100 yapmak