CSS margin-bottom 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-bottom: 100px;} } @keyframes animasyonismi { 50% {margin-bottom: 100px;} } </style> </head> <body> <strong>css margin-bottom animasyon</strong> <div id="kutu-1"> Bu yeşil kutunun margin-bottom değeri 100px uygulandığındaki hali..</div> <div style="background-color:pink;height:150px;"></div> <mark>css margin-bottom</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-bottom ö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-bottom: 100px;}
    }
    
    @keyframes animasyonismi {
        50% {margin-bottom: 100px;}
    }
  </style>
</head>

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

<div id="kutu-1">
    Bu yeşil kutunun margin-bottom değeri 100px uygulandığındaki hali..</div>
  <div style="background-color:pink;height:150px;"></div>
  <mark>css margin-bottom</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-bottom ö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-bottom animasyon

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML s Etiketi

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

HTML p Etiketi

Html belgesi yapısını anlama uygulaması

Html dersleri

Web Sitenizden Çok Para Kazanin

CSS flex-flow Örnek

CSS3 animation-delay Uygulama

javascript yazım kuralları

CSS3 box-shadow uygulama