CSS background-position animasyon özelliği

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #kutu-1 { width: 250px; height: 250px; border: 1px solid gray; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6lQlVvZJWv_6veqhCuNPaoiRvLeovQyM3SJwMO2ebNae6zYjF4b7AZPSCn2O-CTbcbgbi-QfoBKhSAEl0xnX46Qg7uTBtmFe-fGG_UIGFDGsveHzJLv1JiLjO13vI4bjmE876vLouPg/s1600/panda.jpg'); background-position: top left; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {background-position: center;} } @keyframes animasyonismi { 50% {background-position: center;} } </style> </head> <body> <strong>css background-position animasyon</strong> <p>Bu örnekte arkaplan olarak eklediğimiz panda resmini 'sol üst' konumundan merkeze göre konumlandırıp sonra tekrar 'sol üste konumlandıracağız. <p> <div id="kutu-1"></div> <em>CSS background-position özelliğinin animasyon özelliği vardır.</em> </body> </html>

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com