CSS clip animasyon

Aralık 09, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #kutu-1 { width: 120px; height: 120px; background-color: orange; color: black; position: absolute; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {clip: rect(0px, 80px, 80px, 15px);} } @keyframes animasyonismi { 50% {clip: rect(0px, 80px, 80px, 15px);} } </style> </head> <body> <strong>css clip animasyon</strong> <div id="kutu-1"> <h1>CSS3</h1> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p> <mark>css clip</mark> özelliği ile kutunun istenilen kısmının kırpılmasını animasyon ile yapılabilir..</p> <em style="color:red;font-weight:bold;">css clip özelliğinin animasyon özelliği vardır.</em> <br /> <strong> CSS Animasyonları</strong> Internet Explorer 9 ve önceki versiyonlarında çalışmıyor..</p> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    #kutu-1 {
        width: 120px;
        height: 120px;
        background-color: orange;
        color: black;
        position: absolute;
        -webkit-animation: animasyonismi 4s infinite; 
        animation: animasyonismi 4s infinite;
    }
    
    @-webkit-keyframes animasyonismi {
        50% {clip: rect(0px, 80px, 80px, 15px);}
    }
    
    @keyframes animasyonismi {
        50% {clip: rect(0px, 80px, 80px, 15px);}
    }
  </style>
</head>

<body>
  <strong>css clip animasyon</strong>
  <div id="kutu-1">
    <h1>CSS3</h1>
  </div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <p>
    <mark>css clip</mark> özelliği ile kutunun istenilen kısmının kırpılmasını animasyon ile yapılabilir..</p>
  <em style="color:red;font-weight:bold;">css clip  özelliğinin animasyon özelliği vardır.</em>
  <br />
  <strong> CSS Animasyonları</strong> Internet Explorer 9 ve önceki versiyonlarında çalışmıyor..</p>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS clip animasyon

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Javascript Oyun Yapma Dersleri HTML5+CSS3

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

YouTube reklamları nasıl engellenir

Uyurken Bile Para Kazanmak İster misin

Html belgesi yapısını anlama uygulaması

Javascript ile neler yapılabilir

İnternetten hangi alanlarda para kazanılır?-İnternetten para kazanmanın yolları

HTML satırsonları ve boşlukları koruma Örnek

CSS align-self Uygulama

Javascript kodları nereye yazılır