CSS margin-top 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 { height: 150px; background-color: lime; border: 1px solid gray; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {margin-top: 100px;} } @keyframes animasyonismi { 50% {margin-top: 100px;} } </style> </head> <body> <strong>css margin-top animasyon</strong> <div style="background-color:pink;height:150px;"></div> <div id="kutu-1">Bu yeşil kutunun margin-top değeri 100px uygulandığındaki hali..Margin-top değeri ile yeşil kutu üstündeki pembe kutudan 100px kadar uzaklaşmıştır.</div> <mark>css margin-top</mark> özelliği bir html elemenının altındaki eleman ile arasındaki mesafeyi ayarlamak için kullanılır. <p> <em style="color:red;font-weight:bold;">css margin-top ö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 {
        height: 150px;
        background-color: lime;
        border: 1px solid gray;
        -webkit-animation: animasyonismi 4s infinite; 
        animation: animasyonismi 4s infinite;
    }
    
    @-webkit-keyframes animasyonismi {
        50% {margin-top: 100px;}
    }
    
    @keyframes animasyonismi {
        50% {margin-top: 100px;}
    }
  </style>
</head>

<body>
  <strong>css margin-top animasyon</strong>

<div style="background-color:pink;height:150px;"></div>
  <div id="kutu-1">Bu yeşil kutunun margin-top değeri 100px uygulandığındaki hali..Margin-top değeri ile yeşil kutu üstündeki pembe kutudan 100px kadar uzaklaşmıştır.</div>

<mark>css margin-top</mark> özelliği bir html elemenının altındaki eleman ile arasındaki mesafeyi ayarlamak için kullanılır.
  <p>
    <em style="color:red;font-weight:bold;">css margin-top ö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 margin-top animasyon

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML yorum Etiketi Örnek

HTML Yorumlar

Html dersleri

Web Sitenizden Çok Para Kazanin

Uyurken Bile Para Kazanmak İster misin

HTML5 ile SEO Uyumlu İçerik Üret

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

YouTube Reklam Engelleyici

HTML hr Etiketi

Html belgesi yapısını anlama uygulaması