Merhabalar webde bir kod ile karşılaştım.
Bu kod sayesinde kar efekti kullanabiliyorsunuz temalarınızda fakat şöyle bir sorun var,
Bu efekt reklam yöneticisinden ekleniyor. Ve aktifleştirildiğinde arka plan header resmi gidiyor.
Kodları aşağıya bırakıyorum. Bu işlemi header resmi gitmeden yani resimin önüne çekerek kullanabilir miyiz?
Başlık: kar efekti
konumu: Container breadcrumb (top): Above ( üst breadcrumb (top): üstünde ) seçeneğini seçin.
HTML: alanına alttaki kodları ekleyin;
Dosyalar ektedir. 3 adet png ile yapılıyor. Yardımcı olacak varsa çok teşekkür ediyorum.
Bu kod sayesinde kar efekti kullanabiliyorsunuz temalarınızda fakat şöyle bir sorun var,
Bu efekt reklam yöneticisinden ekleniyor. Ve aktifleştirildiğinde arka plan header resmi gidiyor.
Kodları aşağıya bırakıyorum. Bu işlemi header resmi gitmeden yani resimin önüne çekerek kullanabilir miyiz?
Başlık: kar efekti
konumu: Container breadcrumb (top): Above ( üst breadcrumb (top): üstünde ) seçeneğini seçin.
HTML: alanına alttaki kodları ekleyin;
<style>
#header{
background-image: url('/images/snow/s1.png'), url('/images/snow/s2.png'), url('/images/snow/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>
#header{
background-image: url('/images/snow/s1.png'), url('/images/snow/s2.png'), url('/images/snow/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>
