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

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

Linklerin Renklerini Değiştirme Örnek

YouTube Reklam Engelleyici

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML Resimler

HTML bdo Etiketi Örnek