Animasyonlu Duyuru Panosu

Merhaba Arkadaşlar Sizlere Duyuru Panosu Paylaşmak İstedim Sadeve Şık bir anımasyonlu pano

Kod: Tümünü Seç Tümünü Kopyala

<!--koddostu Animasyonlu Açılan Duyuru Panosu START-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<style>
#koddostu-cs3a{cursor:default;position:relative;border-top:8px solid #444;-moz-box-shadow:inset 0 0 6px #888;-webkit-box-shadow: inset 0 0 6px #888;box-shadow:inset 0 0 6px #888;background: #f0f0f0;color:#333;font-family:Helvetica, Arial, sans-serif;font-size:13px;}#koddostu-cs3a, #koddostu-kutu{width:260px;height:130px;padding:10px;-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;}#kd-kapa{position:absolute;top:0px;right:-22px;display:block;width:22px;height:22px;background:#555;color:#fff;line-height:22px;font-size:15px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;text-align:center;text-decoration:none !important;display:none;}</style><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><style>#koddostu-kutu{font-family: Garamond, serif;font-weight:bold;font-size:54px;background:#882222;position:absolute;top:0px;left:0px;line-height:130px;text-align:center;text-decoration:none;color: rgba(0,0,0,0.5);text-shadow: 1px 1px 2px rgba(255,255,255,0.2);background: #666666;background: -moz-linear-gradient(-45deg, #666666 0%, #343434 100%);background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#666666), color-stop(100%,#343434));background: -webkit-linear-gradient(-45deg, #666666 0%,#343434 100%);background: -o-linear-gradient(-45deg, #666666 0%,#343434 100%);background: -ms-linear-gradient(-45deg, #666666 0%,#343434 100%);background: linear-gradient(135deg, #666666 0%,#343434 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#343434',GradientType=1 );
}.koddostuupturn{animation:koddostuupturn 1s ease;animation-fill-mode: forwards;-webkit-animation:koddostuupturn 1s ease;-webkit-animation-fill-mode: forwards;-webkit-border-bottom-right-radius: 6px;
}@-webkit-keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}@-o-keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}@-ms-keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}@keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}

</style>
<!--[if lt IE 10]>
<style>
.koddostuupturn{
  top:-150px !important;
}
</style>
<![endif]-->

<div id="koddostu-cs3a" style="">
<koddostu><a href="javascript:void(0)" id="kd-kapa" onclick="document.getElementById('koddostu-kutu').className='';this.style.display='none';">x</a></koddostu>
<div id="koddostu-kutu" onmouseover="this.className='koddostuupturn';document.getElementById('kd-kapa').style.display='block'">Duyuru</div>

Merhaba!

<br/><br/>

Koddostu.com tarafından sitemiz için hazırlanmış bu ücretsiz duyuru panosundan sitemizle ilgili son yenilikleri öğrenebilirsiniz!

<br/><br/>

Görüşmek üzere!

</div>

<!--Telif sahibi:koddostu.com-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Kod Dostu Animasyonlu Açılan Duyuru Panosu STOP-->