<!--mansetkoduBasi--> <style type="text/css"> #slider { width: 600px; height: 200px; margin: 40px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative; } #mask { overflow: hidden; } #slider:hover { background-color: #fff; border: 10px solid #ddd; } #slider:hover #pause { opacity: 1; } #slider:hover #progress { background-color: rgba(255,255,255,0.0); } #slider:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; } #pause { width: 600px; height: 200px; position: absolute; top: 0; opacity: 0; background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/ibrahimahi-manset-alani.png); background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #progress { width: 1px; height: 1px; background-color: #ffd000; -moz-animation: progress 18s infinite; -webkit-animation: progress 18s infinite; position: relative; top: -1px; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #overlay { width: 600px; height: 200px; position: absolute; top: 0; background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/ibrahimahi.png); background-position: center; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5; -moz-animation: overlay-fade 18s infinite; -webkit-animation: overlay-fade 18s infinite; } #slider ul { width: 2400px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation 18s infinite; -webkit-animation: slide-animation 18s infinite; position: relative; left: 0px; } #slider li { display: inline; width: 600px; height: 200px; margin: 0; padding: 0; float: left; position: relative; background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/ibrahimahi-yukleniyor.gif); background-position: 50% 50%; background-repeat: no-repeat; } #slider li:last-of-type { background-color: #362c30; } #slider li a { display: block; text-decoration: none; } #slider li span { display: block; width: 560px; padding: 15px 20px; position: absolute; bottom: 0; left: 0; background-color: rgba(54,44,48,0.6); border-top: 1px solid #362c30; text-shadow: 1px 1px 1px #362c30; pointer-events: none; text-align: left; } #slider-shadow { width: 100%; height: 260px; background-image: url(http://img.webme.com/pic/i/ibrahim-ahi/slider-shadow.png); background-position: center bottom; background-repeat: no-repeat; margin: 10px auto 0; } @-webkit-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-moz-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-webkit-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-moz-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-webkit-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } #slider ul li span h2 { font-size: 24px; line-height: 24px; color: #fff; font-weight: normal; font-family: 'Communist-Regular'; text-shadow: 1px 1px 1px #362c30; } </style>
<div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
<li><a href="#" title="Manşetler Düzenleniyorrr"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber1.png" alt="" /></a><span>
<h2>BURAYA AÇIKLAMA</h2>
</span></li>
<li><a href="#" title="Buraya Bişiler Yazacam"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber2.png" alt="" /></a> <span>
<h2>BURAYA AÇIKLAMA</h2>
</span></li>
<li><a href="#" title="Buraya Başlık Yazacam <img src=" smilies.webme.com="" smiles="" border="0">"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber3.png" alt="" /></a></li>
<li><a href="#" title="Buryada Bişiler Gelecek"><img src="http://img.webme.com/pic/i/ibrahim-ahi/haber3.png" alt="" /></a></li>
</ul>
</div>
<div id="progress"> </div>
<div id="overlay"> </div>
<div id="pause"> </div>
</div>
</div>
<!--mansetkoduSonu-->
Yeni Tasarımımıza Geçtik (Değerlendirmenizi Bekliyoruz)
