Merhaba değerli forum üyeleri,

Web projelerinize görsel derinlik ve atmosfer katmak istiyorsanız, sadece CSS kullanarak hazırlanan bu yağmur ve şimşek animasyonu oldukça işinize yarayacaktır. JavaScript kullanmadan, sadece keyframes yapılarıyla bu etkileyici sonucu elde edebilirsiniz.

Uygulamanın önizlemesi ve detaylı anlatımı için videoyu inceleyebilirsiniz:

[Foruma üye olmadığınız sürece forum içeriğindeki bağlantıları görüntüleyemezsiniz. Foruma üye olmak için TIKLAYIN!]

HTML Yapısı
Projenize eklemeniz gereken temel HTML iskeleti şu şekildedir:

Kod:

<div class="rain"></div>

Kod:

 <div class="youtube"> 
     <a class="watch" href="#" target="_blank"><span>Seyret</span></a> 
     <a class="me" href="https://www.youtube.com/channel/UC-66vmW776afaHILFSHnVMA?sub_confirmation=1" target="_blank"><span>ABONE OL</span></a>
 </div>

CSS Kodları
Görselliği sağlayan ve animasyonları tetikleyen CSS blokları aşağıdadır:

Kod:

* {

Kod:

     padding: 0;
     margin: 0;
 }

 body {
     background-color: #222222;
     background: url('https://image.ibb.co/n1AfUK/background.jpg');
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     overflow: hidden;
 }

 .rain {
     height: 100vh;
     background: url('https://image.ibb.co/cCRb3e/rain.png');
     background-size: 200px;
     animation: rain .4s linear infinite;
 }

 .rain::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background: #efefef;
     animation: lighting .30s linear infinite;
     opacity: 0;
 }

 @keyframes rain {
     0% { background-position: 0 30%; }
     100% { background-position: 10% 50%; }
 }

 @keyframes lighting {
     0% { opacity: 0; }
     10% { opacity: 0; }
     12% { opacity: .5; }
     16% { opacity: 0; }
     50% { opacity: 0; }
     52% { opacity: .2; }
     54% { opacity: 0; }
 }

Kısa Notlar:

• rain animasyonu ile arka plan görselini sürekli kaydırarak yağış efekti veriyoruz.
• lighting animasyonu ise opacity (opaklık) değerini anlık yükseltip düşürerek şimşek çakmasını simüle eder.
• Kendi görsellerinizi kullanarak efektin tarzını değiştirebilirsiniz.

İyi çalışmalar dilerim!