Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

CSS z-index animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> div {position: absolute;} #crcve div { background-color: yellow; border: 1px solid gray; width: 200px; height: 200px; opacity: 0.4; color:black; margin:100px; } div#kirmizikutu { opacity: 1; background-color: crimson; z-index: 1; -webkit-animation: animasyonismi 6s infinite linear; animation: animasyonismi 6s infinite linear; color:white; } @-webkit-keyframes animasyonismi { 50% {z-index: 5;} } @keyframes animasyonismi { 50% {z-index: 5;} } </style> </head> <body style="position:absolute;"> <strong>css z-index animasyon örnek</strong> <br /> <div id="crcve"> <div id="kirmizikutu">kirmizikutu</div> <div style="top:20px;z-index:1;">z-index: 1</div> <div style="top:40px;z-index:2;">z-index :2</div> <div style="top:60px;z-index:3;">z-index: 3</div> <div style="top:80px;z-index:4;">z-index :4</div> </div> <em style="color:red;">css z-index </em>özelliği ile HTML elemanlarının z-index değerine göre kimin üstte görüneceği belirlenir.Z-index değeri büyük olan en üstte görünür . <br /> <u style="color:blue;"> css z-index</u> özelliğinin animasyon özelliği vardır. <p style="color:green;"><b>Hatırlatma:</b> internet explorer 9 ve önceki versiyonları CSS animasyon özellikleri desteklemez !</p> </body> </html>

Yorumlar