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

Bu blogdaki popüler yayınlar

Linklerin Renklerini Değiştirme Örnek

HTML Element Referansları

HTML main Etiketi

HTML yorum etiketi ile öğe gizleme örneği

Html dersleri

javascript açıklama satırı

HTML5 Canvas Oyun Yapımı Dersleri

Uyurken Bile Para Kazanmak İster misin

CSS content Özelliği