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
Yorum Gönder