Forumda - Sitenizde Kar Yağsın

YoRuMSuZ

Biz işimize bakalım...
Yılbaşının yaklaştığı şu günlerde forumun heder kısmında kar yağışı ister miydiniz? Örneğini forumumuzda gördüğünüz şekilde (giriş yaptığınızda görünür) kar yağışı efekti istiyorsanız aşağıdaki şekilde yapabilirsiniz.

Admin panele girin ve ad_above_top_breadcrumb şablonunu açıp aşağıdaki kodları girin.

Not: Efekt resimlerini eklenti bölümünden indirin ve 3. satırı kendinize göre düzenleyin...

Kod:
<style>
#header{
    background-image: url('resim_yolu/_kar/s1.png'), url('resim_yolu/_kar/s2.png'), url('resim_yolu/_kar/s3.png');
    width: 100%;
z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
</style>

Örnek görünüm: (efetk harektlidir)
vJqVp4.png
 

Eklentiler

  • _kar.zip
    8.6 KB · Gösterim: 405
Top