Merhaba TürkHackTeam Ailesi
Bu Konumda Sizlere Sitenize Nasıl Animasyonlu Duyuru Panosu Ekleyebileceğinizi Göstereceğim.
Animasyonlu Duyuru Panosu
Nasıl Yapılır ?
İlk Önce Html Kodları İle Başlayalım.
Kod:
<div class="clss1">
<div class="clss2">
<p>
<b>Duyuru</b><br/><br/>
Sitemize Hoş Geldiniz! Sitemiz Hakkındaki En Güncel Duyuruları Bu Panodan Takip Edebilirsiniz. Saygılarımla XCodeExpertX...
<!-- Buraya Panodaki Duyuruyu Yazın-->
<a class="clss3" href="https://www.turkhackteam.org" onfocus="this.blur();" target="_blank"></a>
<!-- Panonun Köşesine Tıklandığında Yönlendirilecek Web Adresini "" Arasına Yazabilirsiniz.-->
</p>
</div>
</div>
Ve Html Kodları Bu Kadardı.
Şimdi Css Kodlarına Geçelim.
Kod:
.clss1 {
right:16px;
width: 300px;
min-height:180px;
background: transparent;
margin: 0 auto;
position: fixed;
font-family:Arial, sans-serif !important;
border-radius:3px;
-webkit-border-radius:3px;
bottom: 16px;
overflow: hidden;box-shadow: 0px 1px 4px transparent;
z-index:900;}
.clss3{
margin:0px;
padding:0px;
border:none;
text-decoration:none;
display:block;
width:90px;height:18px;
background:transparent url();
opacity:0.4;filter:alpha(opacity=40);
position:absolute;top:0px;left:-56px;z-index:60200;
}
.clss1 p{
width:0px;height:0px;
overflow:hidden;opacity:0;
position:relative;padding:16px 0 0 20px;
z-index:5;margin:0 0 0 0;
color:rgba(0,0,0,0);}
.clss1:hover p{display:block;
width:100%;height:100%;opacity:1;color:#fff;
transition:opacity 1s 0.4s ease;
}
.clss1:before {
content: "?"; /*Yuvarlak Cismin Üzerinde Hangi Şeklin Olmasını İstiyorsanız "" Arasına Onu Yazınız */
position: absolute;
line-height: 1150px;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 760px;
z-index:1;
width: 1100px;
height: 1100px;
background: #F44336;
border-radius: 50%;
top: 100%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0) scale(0.035);
transform: translate3d(-50%, -50%, 0) scale(0.035);
-webkit-animation: .5s bounce infinite alternate-reverse;
animation: .5s bounce infinite alternate-reverse;
-webkit-transition: .5s -webkit-transform ease, .5s color ease;
transition: .5s transform ease, .5s color ease;
}
.clss1:after {
content: "";
position: absolute;
left: 133px;
right: 133px;
bottom: 0;
height: 15px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
-webkit-transition: .3s opacity ease;
transition: .3s opacity ease;
-webkit-animation: .5s shadow infinite alternate-reverse;
animation: .5s shadow infinite alternate-reverse;
}
.clss1:hover {
box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.3);
-webkit-transition: .5s all ease .25s;
transition: .5s all ease .25s;
}
.clss1:hover:before {
color: #F44336; top: 100%;
-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
transform: translate3d(-50%, -50%, 0) scale(1);
-webkit-transition: .3s top ease, .5s -webkit-transform ease .25s, .5s color ease .25s;
transition: .3s top ease, .5s transform ease .25s, .5s color ease .25s; }
.clss1:hover:after { opacity: 0; }
.clss1:hover .clss2:before {
width: 50px; -webkit-transition: .3s all ease 1.25s; transition: .3s all ease 1.25s; }
.clss1 .clss2 {
padding: 0 35px 5px 0; box-sizing: border-box; display: block;
position: relative; opacity: 1; text-align: center; }
.clss1 .clss2:before {
content: ""; position: absolute; top: 0;
left: 150px; rigth: 150px; width: 0px;
height: 1px; background: black; }
@-webkit-keyframes bounce { from { top: 93%; } to { top: 50%; } }
[USER=350438]KeyF[/USER]rames bounce { from { top: 93%; } to { top: 50%; } }
@-webkit-keyframes shadow {
from { height: 5px; } to {
height: 20px; -webkit-transform: scale(0.3); transform: scale(0.3); } }
[USER=350438]KeyF[/USER]rames shadow {
from { height: 5px; } to { height: 20px; -webkit-transform: scale(0.3); transform: scale(0.3); } }
Tüm Kodlar Bu Kadardı.
Bu Kodları Alıp Sitenize Copy/Paste Yoluyla Hazır Bir Şekilde Kullanabilirsiniz.
:Smiley1005:Kaynakça:Smiley1005:
:Smiley1007:Bu Konumda Bu Kadardı Bir Sonraki Konuda Görüşmek Üzere:Smiley1007: