Html Kayan Yazı ( Marquee ) Kodu

Html Kayan Yazı ( Marquee ) Kodu

Sitenizde bir yazı veya resmi diğer sayfa içeriklerinden daha dikkat çekecek bir şekilde ön planda tutmak isteyebilirsiniz. Html kodlarını kullanarak bu isteğinizi gerçekleştirebilirsiniz. Bir yazı veya resmi html kodu kullanarak sağdan sola, soldan sağa, yukardan aşağıya ve aşağıdan yukarıya doğru kaydırabilirsiniz. Önemli olan sayfa içeriğinize ve konumlandırmanıza uygun olan yönü bulmanızdır.

Kayan Yazı...

Uygulama Html Kodu

<div class="kayanyazi">
<style>
.kayanyazi {
 height: 60px;
 overflow: hidden;
 position: relative;
}
.kayanyazi h3 {
 font-size: 3em;
 color: limegreen;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);
 transform:translateX(100%);
 -moz-animation: kayanyazi 15s linear infinite;
 -webkit-animation: kayanyazi 15s linear infinite;
 animation: kayanyazi 15s linear infinite;
}
@-moz-keyframes kayanyazi {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes kayanyazi {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes kayanyazi {
 0%   { 
 -moz-transform: translateX(100%);
 -webkit-transform: translateX(100%);
 transform: translateX(100%);  
 }
 100% { 
 -moz-transform: translateX(-100%); 
 -webkit-transform: translateX(-100%); 
 transform: translateX(-100%); 
 }
}
</style>
 <h3>Kayan Yazi... </h3>
</div>