CSS outline-offset animasyon
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
#kutu-1 {
border: 1px solid gray;
outline: blue solid 5px;
width: 250px;
height: 300px;
-webkit-animation: animasyonismi 7s infinite;
animation: animasyonismi 7s infinite;
position:relative;
margin:50px;
}
@-webkit-keyframes animasyonismi {
50% {outline-offset: 30px;}
}
@keyframes animasyonismi {
50% {outline-offset: 30px;}
}
</style>
</head>
<body>
<strong>css outline-offset animasyon örnek</strong>
<br />
<div id="kutu-1"></div>
<p>Bu örnek uygulamada ikinci kenarlık ile birinci kenar arasındaki mesafe 30px olarak uyguanmıştır.</p>
<em style="color:red;">css outline-offset </em>özelliği HTML elementinin ikinci kenarlığına renk tanımlamak için kullanılır.
<br />
<u style="color:blue;"> css outline-offset</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