TEMPLATE İletişim yolları duyuru bölümüne ramazan ayı html

[ALemci44]

Ramazan ayı için html widget veya uyarılar duyu bölümüne ekleyeceğiniz ramazan animasyonu. Parlayan ay ve yıldız kayan yıldız hoş geldin ya şehri ramazan yazısı yanım sönen ışık anımasyonlu

ksyek3a.jpeg - Hızlı Resim

Bu görsel, Hızlı Resim'e 18 Şubat 2026 tarihinde yüklendi, 2376×1152 piksel çözünürlüğünde, JPEG formatındadır. — ID: ksyek3a

hizliresim.com

<div id="ramazanMini" style="width:100%;height:260px;position:relative;overflow:hidden;background:radial-gradient(circle at center,#071427,#01040a 80%);border-radius:12px;">

<style>

/* YILDIZ */
@keyframes parilti {0%{opacity:0.4;}100%{opacity:1;}}
.yildiz{
position:absolute;
width:2px;height:2px;
background:white;
border-radius:50%;
animation:parilti 2s infinite alternate;
}

/* KAYAN YILDIZ */
@keyframes kayan {
0%{transform:translate(-100px,-50px);opacity:1;}
100%{transform:translate(700px,220px);opacity:0;}
}
.kayanYildiz{
position:absolute;
top:30px;
left:0;
width:2px;height:2px;
background:white;
box-shadow:0 0 10px white;
animation:kayan 8s linear infinite;
}

/* ASKI */
.aski{
position:absolute;
top:0;
transform-origin:top center;
animation:sallan 4s ease-in-out infinite alternate;
}
.aski.sol{left:20%;}
.aski.sag{right:20%;}

@keyframes sallan{
0%{transform:rotate(-4deg);}
100%{transform:rotate(4deg);}
}

.ip{
width:2px;height:80px;background:#ccc;margin:auto;
}

/* ATEŞ KIRMIZI AY */
@keyframes kirmiziAlev{
0%{
background:radial-gradient(circle at 40% 40%,#ff4d4d,#b30000 70%,#660000);
box-shadow:0 0 20px #ff0000,0 0 35px #ff4500;
}
100%{
background:radial-gradient(circle at 40% 40%,#ff1a1a,#800000 70%,#400000);
box-shadow:0 0 35px #ff0000,0 0 60px #ff4500;
}
}

.hilal{
width:70px;
height:70px;
position:relative;
border-radius:50%;
animation:kirmiziAlev 1.5s infinite alternate;
overflow:hidden;
}

/* BEYAZ İÇ (ESKİ SİYAH MASKE YERİ) */
.hilal:after{
content:"";
position:absolute;
width:70px;
height:70px;
border-radius:50%;
background:white; /* SİYAH YERİ BEYAZ YAPTIK */
left:25px;
z-index:2;
opacity:0.95;
}

/* YILDIZ */
.yildizIc{
position:absolute;
top:25px;
left:28px;
width:18px;
height:18px;
z-index:3;
}

/* YAZI */
@keyframes mahyaBlink {
0%,100%{
opacity:1;
text-shadow:
0 0 8px #fff,
0 0 15px #ffcc00,
0 0 30px #ff8800;
}
50%{
opacity:0.6;
text-shadow:
0 0 4px #fff,
0 0 10px #ffcc00;
}
}

.ramazanYazi{
position:absolute;
bottom:35px;
left:50%;
transform:translateX(-50%);
font-size:22px;
letter-spacing:3px;
color:#ffffff;
animation:mahyaBlink 2s infinite ease-in-out;
font-family: Georgia, serif;
white-space:nowrap;
}

</style>

<!-- YILDIZLAR -->
<div class="yildiz" style="top:30px;left:30%;"></div>
<div class="yildiz" style="top:60px;left:55%;"></div>
<div class="yildiz" style="top:80px;left:45%;"></div>
<div class="kayanYildiz"></div>

<!-- SOL AY -->
<div class="aski sol">
<div class="ip"></div>
<div class="hilal">
<svg class="yildizIc" viewBox="0 0 100 100">
<polygon fill="gold"
points="50,10 61,40 95,40 67,60 78,90 50,70 22,90 33,60 5,40 39,40"/>
</svg>
</div>
</div>

<!-- SAĞ AY -->
<div class="aski sag">
<div class="ip"></div>
<div class="hilal">
<svg class="yildizIc" viewBox="0 0 100 100">
<polygon fill="gold"
points="50,10 61,40 95,40 67,60 78,90 50,70 22,90 33,60 5,40 39,40"/>
</svg>
</div>
</div>

<!-- YAZI -->
<div class="ramazanYazi">
HOŞGELDİN YA ŞEHR-İ RAMAZAN
</div>

</div>

 

[XenConsept]

Emeğinize sağlık.

Altında kendinden sonra gelen alanla arasında boşluk kalmasını isteyenler, ilk satırdaki css alanına margin-bottom: 10px; kodunu ekleyebilir.

 

[ALemci44]

Ve yaI mobilde sığmıyor bunu şu şekilde değiştirin

.ramazanYazi{
  position:absolute;
  bottom:20px;        /* Yüksekliği ayarladık */
  left:50%;
  transform:translateX(-50%);
  font-size:16px;     /* Küçülttük */
  letter-spacing:1px; /* Harf aralığını azalttık */
  color:#ffffff;
  animation:mahyaBlink 2s infinite ease-in-out;
  font-family: Georgia, serif;
  white-space:nowrap;
}