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

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

HTML s Etiketi

Html dersleri

Uyurken Bile Para Kazanmak İster misin

HTML figure Etiketi

HTML5 ile SEO Uyumlu İçerik Üret

HTML rt Etiketi

Html belgesi yapısını anlama uygulaması

YouTube reklamları nasıl engellenir

HTML acronym Etiketi